编辑“︁CSS主轴与交叉轴”︁

{{DISPLAYTITLE:CSS主轴与交叉轴}}

== 概述 ==
'''CSS主轴（Main Axis）与交叉轴（Cross Axis）'''是弹性盒布局（Flexbox）中的核心概念，用于定义弹性容器内项目的排列方向和对齐方式。主轴是弹性项目的主要排列方向，由<code>flex-direction</code>属性决定；交叉轴则是与主轴垂直的轴，用于控制项目的侧向对齐。

理解这两个轴的关系对于掌握Flexbox布局至关重要，尤其是在处理响应式设计和复杂对齐需求时。

== 基本概念 ==
=== 主轴（Main Axis） ===
主轴是弹性项目的主要排列方向，其方向由<code>flex-direction</code>属性决定，可以是以下四种值：
* <code>row</code>（默认值）：主轴为水平方向，从左到右。
* <code>row-reverse</code>：主轴为水平方向，从右到左。
* <code>column</code>：主轴为垂直方向，从上到下。
* <code>column-reverse</code>：主轴为垂直方向，从下到上。

主轴的长度称为'''主轴尺寸（Main Size）'''，即项目的宽度或高度，取决于主轴方向。

=== 交叉轴（Cross Axis） ===
交叉轴始终与主轴垂直：
* 如果主轴是水平方向（<code>row</code>或<code>row-reverse</code>），交叉轴是垂直方向。
* 如果主轴是垂直方向（<code>column</code>或<code>column-reverse</code>），交叉轴是水平方向。

交叉轴的长度称为'''交叉轴尺寸（Cross Size）'''，即项目的高度或宽度，取决于交叉轴方向。

=== 可视化表示 ===
<mermaid>
graph TD
    A[弹性容器] --> B[主轴方向: row]
    A --> C[交叉轴方向: column]
    B --> D[项目从左到右排列]
    C --> E[项目从上到下对齐]
</mermaid>

== 代码示例 ==
=== 基本设置 ===
以下示例展示了一个简单的弹性容器，主轴为<code>row</code>，交叉轴为<code>column</code>：

<syntaxhighlight lang="css">
.container {
    display: flex;
    flex-direction: row; /* 主轴为水平方向 */
    justify-content: center; /* 主轴对齐方式 */
    align-items: center; /* 交叉轴对齐方式 */
    height: 200px;
    border: 1px solid #000;
}

.item {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    margin: 5px;
}
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</syntaxhighlight>

'''输出效果：'''
* 三个蓝色方块水平居中（主轴对齐）。
* 三个蓝色方块垂直居中（交叉轴对齐）。

=== 修改主轴方向 ===
将主轴方向改为<code>column</code>，交叉轴自动变为水平方向：

<syntaxhighlight lang="css">
.container {
    display: flex;
    flex-direction: column; /* 主轴为垂直方向 */
    justify-content: space-between; /* 主轴对齐方式 */
    align-items: flex-end; /* 交叉轴对齐方式 */
    height: 300px;
}
</syntaxhighlight>

'''输出效果：'''
* 三个蓝色方块垂直排列，并在主轴方向上均匀分布（<code>space-between</code>）。
* 三个蓝色方块在交叉轴方向上右对齐（<code>flex-end</code>）。

== 对齐属性 ==
Flexbox提供了以下关键属性来控制主轴和交叉轴的对齐：

=== 主轴对齐 ===
* <code>justify-content</code>：控制项目在主轴上的对齐方式，可选值包括：
  * <code>flex-start</code>（默认）
  * <code>flex-end</code>
  * <code>center</code>
  * <code>space-between</code>
  * <code>space-around</code>
  * <code>space-evenly</code>

=== 交叉轴对齐 ===
* <code>align-items</code>：控制项目在交叉轴上的对齐方式，可选值包括：
  * <code>stretch</code>（默认）
  * <code>flex-start</code>
  * <code>flex-end</code>
  * <code>center</code>
  * <code>baseline</code>

* <code>align-self</code>：覆盖单个项目的<code>align-items</code>值。

== 实际应用案例 ==
=== 导航栏布局 ===
以下是一个典型的导航栏布局，使用主轴（水平方向）和交叉轴（垂直方向）对齐：

<syntaxhighlight lang="css">
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* 主轴：项目均匀分布 */
    align-items: center; /* 交叉轴：垂直居中 */
    padding: 10px;
    background-color: #333;
}

.logo {
    color: white;
    font-size: 1.5em;
}

.nav-links {
    display: flex;
    gap: 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
}
</syntaxhighlight>

<syntaxhighlight lang="html">
<nav class="navbar">
    <div class="logo">MySite</div>
    <div class="nav-links">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>
</nav>
</syntaxhighlight>

'''效果说明：'''
* 品牌标志和导航链接在水平方向上均匀分布（主轴）。
* 所有项目在垂直方向上居中（交叉轴）。

== 高级主题 ==
=== 多行布局中的交叉轴对齐 ===
当项目换行时（<code>flex-wrap: wrap</code>），可以使用<code>align-content</code>控制多行在交叉轴上的对齐方式：

<syntaxhighlight lang="css">
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-around; /* 多行在交叉轴上的对齐 */
    height: 400px;
}
</syntaxhighlight>

=== 数学关系 ===
主轴和交叉轴的关系可以用以下数学表示：
<math>
\text{交叉轴方向} = 
\begin{cases}
\text{垂直方向} & \text{如果 } \text{flex-direction} \in \{\text{row}, \text{row-reverse}\} \\
\text{水平方向} & \text{如果 } \text{flex-direction} \in \{\text{column}, \text{column-reverse}\}
\end{cases}
</math>

== 常见问题 ==
=== 如何记忆主轴和交叉轴？ ===
* 记住主轴是由<code>flex-direction</code>定义的。
* 交叉轴总是与主轴垂直。

=== 为什么我的项目没有垂直居中？ ===
检查以下属性：
1. 容器是否设置了足够的高度？
2. 是否使用了<code>align-items: center</code>？
3. 是否意外覆盖了<code>align-self</code>？

== 总结 ==
* 主轴方向由<code>flex-direction</code>决定。
* 交叉轴始终与主轴垂直。
* 使用<code>justify-content</code>控制主轴对齐。
* 使用<code>align-items</code>和<code>align-content</code>控制交叉轴对齐。
* 实际布局中常常需要同时考虑两个轴的对齐方式。

掌握主轴和交叉轴的概念是成为Flexbox专家的关键一步。通过实践不同的排列组合，您可以轻松创建各种复杂的布局结构。

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