Flex

1.flex实现水平垂直居中

display: flex;

justify-content: center;（主轴是水平方向，水平方向居中 ）

align-items: center;（ 让子盒子在垂直交叉轴方向居中 ） }

效果：

2. align-items 只能定义一根轴线的对齐方式

    align-content 用来定义多根轴线的对齐方式

属性值：

flex-start 和交叉轴起点对齐

flex-end 和交叉轴终点对齐

center 和交叉轴的中点对齐

space-between 与交叉轴两端对齐

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

3. order  定义项目的排列顺序。，默认为0，数值越小，排列越靠前。

div3：{order：-1} 就可以让盒子三排在第一个

效果：

 

4. flex-grow  定义分配的空间，主要用于占满剩余空间，默认值是0

 flex-grow：1 占满剩余空间

flex-shrink    表示是否被压缩 默认值是1。

flex-shrink：0   表示不被压缩

flex-basis  默认值是auto  flex-basis优先级比width要高，即使设置了width，flex-basis 也能取代

flex-basis: 300px  

*   flex是复合属性  可以缩写为：    flex: flex-grow flex-shrink flex-basis 

   例如：flex:1  0  200px; （占满剩余空间，不被压缩，宽200）