Flex弹性布局

//设为flex布局
1 .box {
　　　　display: -webkit-flex; // webkit内核的浏览器要加前缀
2     display: flex;
3 }

设flex布局后，子元素的float, clear和verticle-align属性会失效。

flex容器的子元素自动成为容器成员。

容器有两根轴：水平的主轴（默认），垂直的交叉轴。

一、容器的属性：

• flex-direction:决定项目的排列方向。

值：

row(默认）：从左往右水平；

row-reverse: 从右往左水平；

column:从上往下垂直；

column-reverse:从下往上垂直。

• flex-wrap:如何换行。

值：

nowrap（默认）：不换行；

wrap:换行，第一行在上面；

wrap-reverse:换行，第一行在下面。

flex-flow:flex-direction和flex-wrap的简写，默认row nowrap。

• justify-content:项目的对齐方式。

值：

flex-start（默认）：左对齐；

flex-end:右对齐；

center:居中；

space-between:两端对齐，项目间隔相等；

space-around:项目两侧的间隔相等。项目间的间隔比项目与边框的间隔大一倍。

• align-items:项目在交叉轴上如何对齐。

值：

flex-start:交叉轴的起点对齐；

flex-end:交叉轴的终点对齐；

center:交叉轴的中点对齐；

baseline:项目第一行文字的基线对齐；

stretch(默认）：若项目未设置高度或设为auto,将沾满整个容器高度。

• align-content:定义多根轴线的对齐方式。若只有一条轴线，属性不起作用。

flex-start:交叉轴的起点对齐；

flex-end:交叉轴的终点对齐；

center:交叉轴的中点对齐；

space-between:两端对齐，轴线间间隔平均；

space-around:轴线两侧的间隔相等。轴线间的间隔比轴线与边框的间隔大一倍。

stretch(默认）：轴线占满整个交叉轴。

二、项目的属性：

•  order: 定义项目的排列顺序。数越小越排前，默认0.
• flex-grow:定义项目的放大比例。默认0，即如果存在剩余空间也不放大。
• flex-shrink:定义项目的缩小比例。默认1，即如果空间不足，项目将缩小。负值对该属性不生效。
• flex-basis:定义在分配多余空间前项目占据的主轴空间。默认auto,即项目的本来大小。可设为跟width和height一样的值，项目将占据固定空间。
• flex:flex-grow,flex-shrink和flex-basis的缩写，默认0 1 auto,后两个属性可选。该属性有两个快捷键：auto(1 1 auto)和none(0 0 auto).建议优先写这个属性，而不是分开写三个属性，因为浏览器会推算相关值。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items.默认auto,表示继承父元素的align-items,如果没有父元素，等同于stretch.

值（6个）：

除了auto,其他值与align-items一样。

Flex弹性布局

原文：https://www.cnblogs.com/Willa-Wei/p/14476000.html