flex布局

特性

• 块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。
• flex布局可以实现空间自动分配、自动对齐
• 适用于简单的线性布局

内部子元素是flex-item， 外部父元素是flex-container

flex container的属性

flex-direction

主轴方向。

• row：行（从左往右）
• row-reverse：行（从右到左）
• column：列（从上往下）
• column-reverse：列（从下往上）

flex-wrap

flex默认不换行噻。

• wrap：设置换行
• no-wrap：不换行

flex-flow

以上两个属性的混合。

justify-content

主轴方向上的对齐方式。

• space-between：多余的空间放在中间
• space-around：多余的空间分布在两边，均匀一点分布
• flex-start：元素向主轴开头方向靠
• flex-end：元素向主轴结尾方向靠
• center：居中

align-items

侧轴对齐方式。

• stretch：所有元素都像最高一个一样高（也是默认值）
• flex-start：元素向侧轴开头方向靠
• flex-end：元素向侧轴结尾方向靠
• center：居中

align-content

多行/列内容对齐方式（用的较少），类似于justify-content。

flex item的属性

flex-grow

值是数字。

增长比例（子元素较多时），对子元素进行多余空间的分配。按照flex-grow的值的比例进行分配。

flex-shrink

收缩比例。

flex-basis

默认大小，原始大小（一般不用）。

设置的话则是设置的大小。

flex

上面三个的综合。

order

值是数字。

改变排列顺序。

align-self

自身对齐。（高度不能写死）

可以改变父元素为其设置的对齐方式。