先需要设定容器为 display:flex;
定义为flex之后 容器里的子元素会自动交叉轴上百分百比例显示 如果子元素设置了宽高 可以给margin：auto 自动居中
主轴方向（项目排列方向）
flex-direction
row 从左到右（默认） （主轴水平）
row-reverse 从右到左 （主轴水平）
column 上到下 （主轴垂直）
column-reverse 从下到上（主轴垂直）
换行方式
flex-wrap
nowrap 不换行
wrap 第一行在上
wrap-reverse 第一行在下
简写
flex-flow
flex-flow:row wrap
主轴上对其方式
justify-content
flex-start 左对齐（默认）
flex-end 右对齐
center 居中
space-between 两端对齐，子元素之间间隔都相等
space-around 项目两侧间间隔相等
交叉轴上对齐方式
align-items
flex-start 交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴中点对齐
baseline 项目第一行文字基线对齐
stretch 如果项目未设置高度，则占满父元素（默认值）
填写在子元素中
order 写在css中 默认为0 数值越小越靠前
flex-grow 定义放大比例 默认为0
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink 定义缩小比例 默认为1
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值无效
flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。