flex布局

在flex布局中，flex 项（就是子元素）要么按照 main axis(主轴)（从 main-start 到 main-end ）排布，要么按照cross axis(交叉轴) (从 cross-start 到cross-end)排布。

main axis: flex 容器的主轴，flex 项沿着主轴排布，注意主轴不一定是水平的，主轴是水平还是垂直取决于 flex-direction 属性（见下文）。
main-start|main-end: 分别表示主轴的开始位置和结束位置，flex 项在容器中会从 main-start 到 main-end 排布。
main size: flex 项占据主轴的宽度或高度。flex 项的 main size 属性是要么是“宽度”，要么是“高度”，这取决于主轴方向。
cross axis: 垂直于主轴的轴线称为交叉轴，其方向取决于主轴方向。
cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。flex 项在交叉轴上的排布从 cross-start 开始位置到 cross-end 结束位置。
cross size: flex 项占据交叉轴的宽度或高度。flex 项的 cross size 属性是要么是“宽度”，要么是“高度”，这取决于交叉轴方向。

在flex布局中，flex 项（就是子元素）要么按照 main axis(主轴)（从 main-start 到 main-end ）排布，要么按照cross axis(交叉轴) (从 cross-start 到cross-end)排布。

main axis: flex 容器的主轴，flex 项沿着主轴排布，注意主轴不一定是水平的，主轴是水平还是垂直取决于 flex-direction 属性（见下文）。
main-start|main-end: 分别表示主轴的开始位置和结束位置，flex 项在容器中会从 main-start 到 main-end 排布。
main size: flex 项占据主轴的宽度或高度。flex 项的 main size 属性是要么是“宽度”，要么是“高度”，这取决于主轴方向。
cross axis: 垂直于主轴的轴线称为交叉轴，其方向取决于主轴方向。
cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。flex 项在交叉轴上的排布从 cross-start 开始位置到 cross-end 结束位置。
cross size: flex 项占据交叉轴的宽度或高度。flex 项的 cross size 属性是要么是“宽度”，要么是“高度”，这取决于交叉轴方向。
display
用来定义一个 flex 容器。如果设置为 flex 则容器呈现为块状元素，设置为inline-flex 则容器呈现为行内元素。它为所有直接子元素提供了 flex 上下文。
flex-direction
flex-direction 属性确立了主轴，从而定义了 flex 项在 flex 容器中的排布方向。 Flexbox 是单向布局，有些时候我们也称作一维布局。 可以将 flex 项视为主要沿着水平行或垂直列排布。
flex-direction取值：
row (默认值) :行排布。在 ltr (left to right， 从左到右)排版方式下，flex 项从左到右排列，在 rtl (right to left， 从右到左)排版方式下，flex 项从右到左排列。
row-reverse: 反向行排布，即 row 的反方向，在 ltr 中从右向左，在 rtl 中从左到右。
column: 列排布，与 row 相似，但是 flex 项从上到下排布。
column-reverse: 反向列排布，即 column 反方向，与 row-reverse 相似，只是 flex 项从上到下排布。
flex-wrap：
默认情况下，flex 项会尽可能地尝试排在同一行上（行或列），通过设置 flex-wrap 来决定 flex 项是否允需要换行。
nowrap (默认值) : 所有的 flex 项都会在同一行上排布，也就是我们常说的单行，或不换行。
wrap: flex 项将从上到下根据实际情况排布再多行上，也就是我们常说的多行，或会换行。
wrap-reverse: flex 项将 从下到上 根据实际情况排布再多行上折行。