当您更改 flex-direction 时会发生什么？

刚开始学习弹性盒模型（flexbox）时，这部分是最让人困惑的。我相信很多刚接触 flex 的新手也会有同样的感受。

还记得我之前提到过，默认的主轴和交叉轴方向是“从左到右”和“从上到下”吗？

其实，你也可以改变这个方向。这正是当你使用 flex-direction: column 时发生的情况（记得默认值是 flex-direction: row）。此时，主轴和交叉轴的方向如下面所示发生了变化：

如果你写过英文文本，应该知道英文是从左到右、从上到下书写的。这恰好也是 flexbox 默认主轴和交叉轴的方向。

但当你将 flex 方向改为 column 后，它就不再遵循“英语书写习惯”，而是转向了日语的书写方式——没错，就是日语！

如果你写过日文，就会对这种排布方式感到熟悉。（顺便说一句，我从未写过日文。）日文文本是从上到下、从右到左书写的。稍微想一想，其实也没那么奇怪，对吧？

这也解释了为什么这对英语使用者来说会有些困惑。

让我通过一个例子来详细说明。我们来看一个标准的无序列表，包含三个列表项，这次我将改变 flex-direction：

1	<ul>
2		<li></li>
3		<li></li>
4		<li></li>
5	</ul>

1ul {
2	display: flex;
3	flex-direction: column;
4}

这是更改方向前的样子：

这是更改方向后的样子：

发生了什么？
现在，“文本”是按照日语风格排列的——从上到下（即主轴方向）。

这里有个有趣的现象，我想特别指出一下。

你注意到每个列表项的宽度填满了空间，对吧？

如果在之前，你想调整这一点，通常只需要处理 flex-basis 和（或）flex-grow 属性。

让我们看看这些属性在新布局中如何起作用。

1li {
2	flex-basis: 100px;
3}

……结果如下：

哇？怎么回事？高度变了，但宽度没变？

我之前说过，flex-basis 定义的是每个弹性项目的初始宽度。其实那是错的——或者说，我是在用“英语思维”去理解。现在让我们切换到“日语思维”。

它并不总是“宽度”。

当你改变了 flex-direction 后，请注意：所有原本影响主轴的属性，现在都作用于新的主轴。

比如 flex-basis，原本影响的是沿主轴方向的宽度，现在却影响的是高度，而不是宽度。方向已经变了！

所以即使你使用了 flex-grow，它也会影响高度！

本质上，所有原本作用于水平轴（即原来的主轴）的 flex 属性，现在都作用于新的垂直主轴——只是方向发生了转换而已。

再看一个例子，我保证你看过之后会更清楚。

把刚才那个例子中的弹性项目宽度调小，它们就不再填满整个空间了：

1li {
2	width: 200px;
3}

如果你希望把列表项居中显示在屏幕上怎么办？

在英语语言环境中，也就是你之前处理 flex 容器的方式，这意味着“将弹性项目沿主轴居中”。你会使用 justify-content: center。

但现在这样做行不通了。

因为方向已经改变，中心点现在位于交叉轴上。再仔细看看这张图：

所以，让我们换种思维方式——用日语的视角来看。

主轴是从上到下，不需要关注它；而交叉轴是从左到右，这正是我们需要的方向。

因此，你需要“将弹性项目从交叉轴的起点移动到中心”。

有没有哪个 flex 容器属性让你想到这个？没错，就是 align-items 属性。

记得 align-items 是用来控制交叉轴上的对齐方式的。要让它们居中，你应该这样写：

1ul {
2	align-items: center;
3}

看，搞定！我们的弹性项目已经成功居中了。

这确实可能有点令人困惑，我知道。再回顾一遍吧。

在学习 flexbox 模型的过程中，我发现很多 CSS 书籍都跳过了这一部分。稍微用一点“日语思维”去理解，会非常有帮助。关键是要明白：这些属性的作用方向，取决于当前的 flex-direction。

我相信你又学到了新东西。我自己讲起来也乐在其中。希望你也同样享受这个过程 :-)