Flex的基础概念的基本关系如下图所示：
*容器的属性：
- flex-direction 容器中子项目的布局方向，属性值是 row | row-reverse | column | column-reverse
- flex-wrap 当子项目的总宽度超出容器的宽度时是否换行，属性值是 nowrap | wrap | wrap-reverse
- flex-flow 是 flex-direction || flex-wrap 的简写，默认值是row|nowrap
- 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 | stretch | space-between | space-around
- 项目的属性图示：
项目的属性主要指的是单独一个项目的属性：
- order 指的是单独项目的排列顺序，默认值是0.值越小，排列的位置越靠前。
- flex-grow 项目的放大比例，只跟主轴的剩余空间有关，默认值是0
- flex-basis
- align-self 单独的排列属性
- flex-shrink 项目的缩小比例，默认值1
- flex 是 flex-grow|flow-shrink|flex-basis的简写