Flex为"弹性布局"，任何一个容器都可以指定为 Flex 布局。

.box{

display: flex;

}

行内元素也可以使用 Flex 布局。

.box{

display: inline-flex;

}

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素，称为 flex container。它的所有子元素自动成为容器成员，称为flex item。Flex container默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

container属性

• flex-direction主轴的方向

row 水平方向

row-reverse

column 垂直方向

column-reverse

• flex-wrap如果一条轴线排不下，如何换行。

nowrap 不换行

wrap 第1行在上边

wrap-reverse 第1行在下边

• justify-content 定义了项目在主轴上的对齐方式

flex-start 左对齐

flex-end 右对齐

center 居中对齐

space-between 两端对齐，项目之间的间隔都相等

space-around 每个项目两侧的间隔相等

• align-items定义项目在交叉轴上如何对齐

align-items:

flex-start 交叉轴起点

flex-end 交叉轴终点

center 交叉轴中点对齐

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

stretch 如果项目未设置高度或设为auto，将占满整个容器的高度

• align-content定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start 与交叉轴的起点对齐

flex-end 与交叉轴的终点对齐

center 与交叉轴的中点对齐

space-between 与交叉轴两端对齐，轴线之间的间隔平均分布

space-around 每根轴线两侧的间隔都相等

stretch 轴线占满整个交叉轴