display:flex
flex-direction: row(行)/column(列)/row-reverse/column-reverse反方向 //布局
justify-content: start/end/center//space-evenly/space-between/space-around //对齐位置
align-items:center //交叉轴对齐
span-evenly:
![](https://images2018.cnblogs.com/blog/581269/201806/581269-20180605182025344-631778296.png)
span-around:
![](https://images2018.cnblogs.com/blog/581269/201806/581269-20180605182032559-265054188.png)
span-between:
![](https://images2018.cnblogs.com/blog/581269/201806/581269-20180605182037169-1699306468.png)
flex-warp:warp //允许flex项多列,溢出容器的子项将被排列到另一行中