`flex-direction` 是 CSS 中 Flexbox(弹性盒子)布局的一个属性。它用于定义主轴的方向,也就是弹性子项(flex items)如何沿着容器(flex container)排列。通过设置 `flex-direction` 的值,您可以改变 Flexbox 布局中子项的排列方向。
`flex-direction` 有以下四个可能的值:
1. `row`:这是默认值。子项默认沿着水平方向从左到右排列(在左到右的文本环境中)。如果容器宽度不足以容纳所有子项,它们可能会溢出容器宽度。
2. `row-reverse`:子项沿着水平方向从右到左排列。同样,如果容器宽度不足以容纳所有子项,它们会溢出容器宽度。
3. `column`:子项沿着垂直方向从上到下排列。如果容器高度不足以容纳所有子项,它们会溢出容器高度。在这种方向下,主轴变为垂直方向。
4. `column-reverse`:子项沿着垂直方向从下到上排列。主轴仍然是垂直方向,但顺序是反方向的。
这个属性对 Flexbox 布局非常重要,因为它决定了子项如何在容器中排列。改变 `flex-direction` 的值可以彻底改变布局的外观和行为。