flex弹性布局
主轴：水平
交叉轴：垂直
display：flex
容器的属性：
flex-direction：决定排列方向
flex-wrap : 排在一条线上，超出如何换行
flex-flow ： flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content: 项目在主轴上的对齐方式
align-items : 项目在交叉轴上如何对齐。
align-content : 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
对于上一个的属性：
order ：排列顺序。数值越小越靠前
flex-grow ：放大的比例
flex-shrink ：缩小比例
flex-basis ：计算主轴是否有多余空间
flex ：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self ：允许单个项目有与其他项目不一样的对齐方式，
首行对齐：display：flex；
居中对齐：display：flex； justify-content:center;
右对齐 ：display：flex； justify-content:flex-end;
交叉轴对齐：display：flex；align-item：center；
中心点： display：flex；align-item：center； justify-content:center;
主轴居中交叉轴结尾 display: flex; justify-content: center; align-items: flex-end;
网站推荐|：https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
