主轴

flex布局是一种一维布局模型，一次只能处理一个维度（一行或者一列）上的元素布局，作为对比的是二维布局CSS Grid Layout，可以同时处理行和列上的布局。

也就是说，flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

1. 主轴的方向

我们可以在弹性容器上通过flex-direction修改主轴的方向。如果主轴方向修改了，那么：

1. 交叉轴就会相应地旋转90度。

2. 弹性元素的排列方式也会发生改变，因为弹性元素永远沿主轴排列。

flex-direction:row

flex-direction:column

flex-direction:row-reverse

flex-direction:column-reverse

2. 沿主轴的排列处理

弹性元素永远沿主轴排列，那么如果主轴排不下，该如何处理？

通过设置flex-wrap: nowrap | wrap | wrap-reverse可使得主轴上的元素不折行、折行、反向折行。

默认是nowrap不折行，难道任由元素直接溢出容器吗？当然不会，那么这里就涉及到元素的弹性伸缩应对，下面会讲到。

wrap折行，顾名思义就是另起一行，那么折行之后行与行之间的间距（对齐）怎样调整？这里又涉及到交叉轴上的多行对齐。

wrap-reverse反向折行，是从容器底部开始的折行，但每行元素之间的排列仍保留正向。

3. 一个复合属性

flex-flow = flex-drection + flex-wrap

flex-flow相当于规定了flex布局的“工作流(flow)”

flex-flow: row nowrap;