flex布局

flex 弹性布局。任何容器都可指定为 flex布局。

当父盒子设置为 flex 之后，子元素的float、clear和 vertical-align 属性将失效。

父元素添加 display：flex；变为flex容器。它的子元素称为容器成员，称为flex项目。

原理：通过给父盒子添加 flex属性，控制子盒子的位置以及排列方式。

flex常见父项属性

flex-dircetion:  设置主轴方向；

justify-content:  设置主轴子元素排列方式

( flex-start相当于left，end相当于 right )

flex-wrap： 设置子元素是否换行

（ flex中默认子元素不换行，若装不开则缩小子元素宽度，仍挤在父元素里面。)

align-content:  设置侧轴上子元素排列方式（多行元素）；（应先设置flex-wrap:wrap;）

align-items：   设置侧轴上子元素排列方式（单行元素）；

flex-flow：   复合属性，相当于同时设置了flex-direction 和 flex-wrap

flex-flow:column  wrap;     // y轴为主轴，换行

flx常见子项属性

• flex子项目分配剩余空间，表示占的份数

flex: number；// 默认为0， 1表示 该子元素占1份.. 

等分 让所有子元素添加  flex:1  即可。

（圣杯布局：父容器flex，盒子1固定宽，盒子2 flex:1，盒子3固定宽）

• align-self 控制子项自己在侧轴的排列方式

align-self 允许单个子项目和其他项目不一样的对齐方式，可覆盖 align-items属性。

默认为auto，表示继承父元素

• order属性定义子项排列顺序（前后顺序）

order：number;   // 默认为0，若想提前则可写为-1