felx布局

父级属性

flex

水平对齐 justify-content:

justify-content

垂直对齐 align-items:

align-items

主轴方向 flex-direction:

direction

空间不足换行 flex-wrap:

nowrap(默认)：不换行  
wrap  
wrap-reverse  

多行垂直对齐 align-content:

align-content

felx-flow:row nowrap

flex-direction 和 flex-wrap属性的简写形式  

子集属性

item

flex:< flex-grow>< flex-shrink>< flex-basis> 默认(0,1,auto)
flex:1 => flex:1,1,0%
flex-basis:130px 相当于width（或height）根据flex-direction确定

oder:2 数值越小越靠前
align-self: 用来覆盖父元素垂直对齐方式align-items

felx-flow

flex-grow

felx-basis

flex-basis

参考教程：
https://segmentfault.com/a/1190000018233450
https://www.html.cn/archives/7236

图片源自网络，仅用于学习使用，如有侵权请告知！