CSS 零基础教程

CSS flex-direction 属性

在 CSS Flexbox 中，flex-direction 是控制容器内项目布局的最基础属性。它决定了弹性项目排列的方向，本质上也就是定义了 Flexbox 的主轴 (Main Axis)。

如果不使用 flex-direction，你就只能局限于浏览器的默认排版行为，这往往无法满足复杂的网页设计需求。

1. 理解 flex-direction 属性

flex-direction 属性指定了弹性容器中子项目的排列方向。它接受以下四个可能的值：

  • row (默认值): 弹性项目水平并排显示，从左到右排列（在从左到右的语言环境中）。
  • row-reverse: 弹性项目水平并排显示，但是反向排列，从右到左。
  • column: 弹性项目垂直堆叠显示，一个接一个，从上到下排列。
  • column-reverse: 弹性项目垂直堆叠显示，但是反向排列，从下到上。

1.1 row：默认的水平排列

当你创建一个弹性容器时，默认的 flex-direction 就是 row。这意味着项目会自动从左到右水平排列。

代码示例：

<div class="container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
.container {
  display: flex;
  /* flex-direction: row; 这是默认行为，可以不写 */
  background-color: #f0f0f0;
  padding: 10px;
}

.container > div {
  background-color: #ddd;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

在这个例子中，“项目 1”、“项目 2”和“项目 3”将在同一行水平显示。

1.2 row-reverse：水平反向排列

使用 row-reverse 可以翻转行内项目的顺序。它们仍然是水平排列的，但起点变成了右侧，向左延伸。

代码示例：

<div class="container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
.container {
  display: flex;
  flex-direction: row-reverse; /* 水平反向 */
  background-color: #f0f0f0;
  padding: 10px;
}

.container > div {
  background-color: #ddd;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

现在，页面上从左到右看到的顺序将是：“项目 3”、“项目 2”、“项目 1”。这在不改变底层 HTML 结构的情况下调整视觉顺序非常有用，对无障碍访问 (Accessibility) 和 SEO 都有积极意义。

1.3 column：垂直堆叠排列

当你把 flex-direction 设置为 column 时，主轴就从水平变成了垂直。项目会像积木一样从上到下垂直堆叠。

代码示例：

<div class="container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
.container {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  background-color: #f0f0f0;
  padding: 10px;
}

.container > div {
  background-color: #ddd;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

此时，项目垂直排列：顶部是“项目 1”，接着是“项目 2”，最下面是“项目 3”。这是创建垂直导航菜单或按特定顺序堆叠内容的绝佳方法。

1.4 column-reverse：垂直反向排列

顾名思义，column-reverse 会反转垂直堆叠的顺序。项目依然垂直排列，但起点变成了底部，向上延伸。

代码示例：

<div class="container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>
.container {
  display: flex;
  flex-direction: column-reverse; /* 垂直反向 */
  background-color: #f0f0f0;
  padding: 10px;
}

.container > div {
  background-color: #ddd;
  margin: 5px;
  padding: 10px;
  text-align: center;
}

在这种情况下，从上到下看到的顺序将是：“项目 3”、“项目 2”、“项目 1”。和 row-reverse 一样，它非常适合在视觉上重新排序内容。