弹性盒布局-direction-wrap-flow

一、弹性盒布局

　　　　简易来讲就是可以伸缩的盒子

　　　　优势：写起来比较简单

　　　　　　　使用灵活且代码简洁

　　　　缺点：不兼容IE和安卓低级版本　

二、使用

　　　　容器　　　　　　（父元素）

　　　　display:flex------让容器成员是弹性的项目

　　　　flex-direction------决定主轴是什么方向（项目排序方向）

　　　　　　　　　　　　1、row 横向排列

　　　　　　　　　　　　2、column 纵向排列

　　　　　　　　　　　　3、row-reverse 横向翻转

　　　　　　　　　　　　4、column-reverse 纵向翻转

　　　　flex-wrap------让项目是否换行

　　　　　　　　　　1、nowrap 不换行

　　　　　　　　　　2、wrap 换行

　　　　　　　　　　3、wrap-reverse 换行翻转

　　　　justify-content------横向盒子摆放

　　　　　　　　　　　　1、flex-start 靠左

　　　　　　　　　　　　2、flex-end 靠右

　　　　　　　　　　　　3、center 水平居中

　　　　　　　　　　　　4、space-between 两端对齐，项目之间的距离都相等

　　　　　　　　　　　　5、space-around 两端对齐，最两边的距离是项目间距离的一半

　　　　align-items------纵向盒子摆放

　　　　　　　　　　　　1、flex-start 靠上

　　　　　　　　　　　　2、flex-end 靠下

　　　　　　　　　　　　3、center 垂直居中

　　　　　　　　　　　　4、baseline 项目的第一行文字为基线

　　　　　　　　　　　　5、stretch 如果容器没有设置高度或者auto则占满整个高度

　　　　容器成员|项目　　（子元素）

　　　　（许多元素，要分清楚是给父元素加还是给子元素加）

　　　　order------排序方式，数值越小，排序位置越靠前

　　　　flex-grow------默认值0，比例放大

　　　　flex-shrink------默认值1，比例缩小

　　　　flex-basis------相当于width

　　　　flex------复合（grow + shrink +basis）

　　　　　　　默认值 0 1 auto

　　　　　　　后两个值是可选择