Flex 基础概念整理

Flex的基础概念的基本关系如下图所示：

水平轴、垂直轴、轴的起始点、和容器的关系如下图所示

*容器的属性：

1. flex-direction 容器中子项目的布局方向，属性值是 row | row-reverse | column | column-reverse
2. flex-wrap 当子项目的总宽度超出容器的宽度时是否换行，属性值是 nowrap | wrap | wrap-reverse
3. flex-flow 是 flex-direction || flex-wrap 的简写，默认值是row|nowrap
4. justify-content 容器中子项目在主轴的对齐方式，值是 flex-start |flex-end | center | space-between | space-around
5. align-items 容器中子项目在垂直交叉轴上的对齐方式，值是 flex-start | flex-end | center | baseline | stretch
6. align-content 多根轴线的对齐方式（跟容器中的子项目无关，是容器中的轴线的对齐方式），值是 flex-start | flex-end | center | stretch | space-between | space-around

• 项目的属性图示：

项目的属性主要指的是单独一个项目的属性：

1. order 指的是单独项目的排列顺序，默认值是0.值越小，排列的位置越靠前。
2. flex-grow 项目的放大比例，只跟主轴的剩余空间有关，默认值是0
3. flex-basis
4. align-self 单独的排列属性
5. flex-shrink 项目的缩小比例，默认值1
6. flex 是 flex-grow|flow-shrink|flex-basis的简写