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