flex。

 块元素垂直居中通过定位的方式相对复杂； 块元素并排显示通过浮动会引起一些列问题（）需要清理浮动（麻烦），flex布局可以解决上述问题。

采用Flex布局的元素，称为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目（flex item），flex容器有两条轴：主轴 main axis（默认水平轴），交叉轴cross axis（默认垂直轴，两轴默认方向为从上到下从左到右

1.容器属性

1.1 flex-direction 

调整主轴，轴的起始点

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿

1.2  justify-content

主轴项目排列方式

 align-items，align-content

调整交叉轴的对齐方式，只针对一行生效，多行采用align-content

 align-content

  align-items，align-content 子项目没设置高度时默认stretch拉伸占满整个交叉轴。

2.项目属性

order属性

在不改变Html结构的前提下，通过Order大小排序展示元素；

Order值越小越靠前,默认值为0.

flex-grow属性

定义了项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

两边元素固定宽度，中间元素flex-grow:1表示中间元素吞并剩余空间，实现中间元素宽度自适应效果。

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足且不换行时（flex-warp:nowarp）自动缩小；

可单独作用在一个元素上。

flex-basis

在分配剩余空间之前，项目占据主轴空间的大小（main size），通过其判断剩余空间，默认值auto为项目本身大小

flex属性

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

 align-self属性

自定义单个元素的交叉轴对其方式，值同对应轴的对齐方式；

覆盖容器align-item属性