box
display: flex | inline-flex

flex-direction: row | row-reverse | column | column-reverse
flex-wrap: wrap | nowrap | wrap-reverse
flex-flow: (flex-direction) (flex-wrap)
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: stretch | flex-start | flex-end | center | base-line
align-content: stretch| flex-start | flex-end | center | space-between | space-around

item

order: n // 排序 默认为0
flex-grow：n // 放大比例 默认为0 即存在存在剩余设备也不更新
flex-shrink: n // 缩小比例 默认为1 如果空间不足项目将缩小 ps：0为不缩小
flex-basis: n // 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex: <flex-grow> | <flex-shrink> || <flex-basis>
align-self: auto | flex-start | flex-end | center | baseline | stretch //继承align-items 或者覆盖