display:flex布局

displat:flex的六个属性：

1. flex-direction;  row,columns,row-reverse//排列的方向
2. flex-wrap:  nowrap(默认) 元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；,wrap元素是否换行。
3. justify-content : 横轴的对齐方式 flex-start|flex-end|center|space-between|space-around;
4. align-items: 纵轴的对齐方式 flex-start|flex-end|center|baseline|stretch
5. align-content属性:属性定义了多根轴线的对齐方式,如果项目只有一根轴线，该属性不起作用。flex-start|flex-end|center|space-between|space-around|stretch
6. flex-grow: 父类宽度未占满，成比例放大。默认为0，存在剩余空间也不放大。
7. flex-shrink: 成比例缩小。默认为1.
8. flex-basis：flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
9. flex:flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选.
10. 参考地址：https://www.jianshu.com/p/4290522e1560