编辑“︁CSS弹性方向（Flex Direction）”︁

= CSS弹性方向（Flex Direction） =

'''CSS弹性方向'''（flex-direction）是CSS弹性盒布局（Flexbox）中的核心属性之一，用于定义弹性容器内子元素的排列方向。通过调整该属性，开发者可以控制子元素是按行排列、按列排列，还是以相反的顺序排列。

== 基本概念 ==

弹性方向（flex-direction）决定了弹性容器（flex container）的主轴方向，即子元素（flex items）的排列方式。它接受以下四个值：
* <code>row</code>（默认值）：子元素从左到右水平排列。
* <code>row-reverse</code>：子元素从右到左水平排列。
* <code>column</code>：子元素从上到下垂直排列。
* <code>column-reverse</code>：子元素从下到上垂直排列。

弹性盒布局的主轴（main axis）和交叉轴（cross axis）会根据<code>flex-direction</code>的值动态调整：
* 当<code>flex-direction: row</code>或<code>row-reverse</code>时，主轴为水平方向，交叉轴为垂直方向。
* 当<code>flex-direction: column</code>或<code>column-reverse</code>时，主轴为垂直方向，交叉轴为水平方向。

== 语法 ==

<source lang="css">
.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}
</source>

== 示例 ==

=== 示例1：默认方向（row） ===
<source lang="html">
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
</source>

<source lang="css">
.container {
  display: flex;
  flex-direction: row;
  border: 1px solid #000;
  padding: 10px;
}
.item {
  background: #f0f0f0;
  margin: 5px;
  padding: 10px;
}
</source>

'''输出效果：'''
1 2 3 （从左到右排列）

=== 示例2：反向行（row-reverse） ===
<source lang="css">
.container {
  display: flex;
  flex-direction: row-reverse;
}
</source>

'''输出效果：'''
3 2 1 （从右到左排列）

=== 示例3：列方向（column） ===
<source lang="css">
.container {
  display: flex;
  flex-direction: column;
}
</source>

'''输出效果：'''
1  
2  
3  
（从上到下排列）

=== 示例4：反向列（column-reverse） ===
<source lang="css">
.container {
  display: flex;
  flex-direction: column-reverse;
}
</source>

'''输出效果：'''
3  
2  
1  
（从下到上排列）

== 主轴与交叉轴的关系 ==

弹性盒布局的主轴和交叉轴会根据<code>flex-direction</code>的值动态变化。以下图表展示了不同方向下的主轴和交叉轴：

<mermaid>
graph TD
  A[flex-direction] --> B[row]
  A --> C[row-reverse]
  A --> D[column]
  A --> E[column-reverse]
  B --> F[主轴: 水平, 起点在左]
  C --> G[主轴: 水平, 起点在右]
  D --> H[主轴: 垂直, 起点在上]
  E --> I[主轴: 垂直, 起点在下]
</mermaid>

== 实际应用场景 ==

=== 场景1：导航栏布局 ===
在水平导航栏中，通常使用<code>flex-direction: row</code>（默认值）来排列菜单项：
<source lang="css">
.navbar {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
</source>

=== 场景2：移动端垂直菜单 ===
在移动端设计中，可能需要将导航栏改为垂直排列：
<source lang="css">
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
  }
}
</source>

=== 场景3：表单布局 ===
表单中的输入框和标签可以使用<code>flex-direction: column</code>垂直排列：
<source lang="css">
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
</source>

== 注意事项 ==
* 弹性方向会影响<code>justify-content</code>（主轴对齐）和<code>align-items</code>（交叉轴对齐）的行为。
* 在RTL（从右到左）语言环境中，<code>row</code>的起点会自动调整为右侧。
* 使用<code>row-reverse</code>或<code>column-reverse</code>时，DOM顺序和视觉顺序会不一致，可能影响可访问性。

== 数学关系 ==
弹性盒布局的排列方向可以用向量表示。设主轴方向为<math>\vec{d}</math>：
* <code>row</code>: <math>\vec{d} = (1, 0)</math>
* <code>row-reverse</code>: <math>\vec{d} = (-1, 0)</math>
* <code>column</code>: <math>\vec{d} = (0, 1)</math>
* <code>column-reverse</code>: <math>\vec{d} = (0, -1)</math>

== 浏览器兼容性 ==
所有现代浏览器均支持<code>flex-direction</code>属性，包括：
* Chrome 29+
* Firefox 28+
* Safari 9+
* Edge 12+
* Opera 17+

== 总结 ==
<code>flex-direction</code>是弹性盒布局的基础属性，通过调整它可以轻松实现多种布局需求。理解主轴和交叉轴的关系对于掌握弹性盒布局至关重要。建议通过实际练习来熟悉不同方向的效果。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS弹性盒布局]]