flex分为父项布局和子项布局

flex父项常见布局

flex-direction:  row    row-reverse   column   column-reverse  

justify-content:  flex-start   flex-end   center   space-around (平分剩余空间)     space-between （贴边）

flex-wrap:         nowrap   wrap

align-content:  （多行）flex-start     flex-end    center    space-between    space-around

align-items:      （单行）flex-start    flex-end     center    stretch (不设置高度，填满父控件)

flex-row:  flex-direction 和 flex-wrap 合并  column wrap

flex子项常见属性

flex    （剩余空间占多少份）flex:1 （）该元素占满剩余空间

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

align-self  （侧轴  覆盖 align-items）

order    默认为0 ，-1为与前面的交换位置