编辑“︁CSS弹性对齐”︁

= CSS弹性对齐 =

CSS弹性对齐（Flexbox Alignment）是CSS弹性盒布局（Flexbox）中的核心功能之一，它允许开发者通过简单的属性控制弹性容器内项目的对齐方式，包括主轴（main axis）和交叉轴（cross axis）上的对齐、分布和间距调整。

== 基本概念 ==

弹性对齐基于弹性容器（flex container）和弹性项目（flex items）的模型工作。弹性容器通过设置<code>display: flex;</code>或<code>display: inline-flex;</code>来定义，其子元素自动成为弹性项目。对齐属性分为两类：

* '''主轴对齐'''：控制项目在主轴（默认水平方向）上的排列方式。
* '''交叉轴对齐'''：控制项目在交叉轴（默认垂直方向）上的排列方式。

=== 主轴对齐属性 ===
主轴对齐使用<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>：项目均匀分布，包括边缘空间。

<syntaxhighlight lang="css">
.container {
  display: flex;
  justify-content: space-between; /* 主轴对齐示例 */
}
</syntaxhighlight>

=== 交叉轴对齐属性 ===
交叉轴对齐使用<code>align-items</code>（控制所有项目）和<code>align-self</code>（控制单个项目），可选值包括：
* <code>stretch</code>（默认）：项目拉伸填满容器高度。
* <code>flex-start</code>：项目向交叉轴起点对齐。
* <code>flex-end</code>：项目向交叉轴终点对齐。
* <code>center</code>：项目居中对齐。
* <code>baseline</code>：项目按基线对齐。

<syntaxhighlight lang="css">
.container {
  display: flex;
  align-items: center; /* 交叉轴对齐示例 */
}

.item {
  align-self: flex-start; /* 单个项目覆盖对齐 */
}
</syntaxhighlight>

== 多行对齐 ==
当项目换行时，可使用<code>align-content</code>控制多行整体对齐方式，其值与<code>justify-content</code>类似：

<syntaxhighlight lang="css">
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around; /* 多行对齐示例 */
}
</syntaxhighlight>

== 实际案例 ==
以下是一个导航栏的实现，展示弹性对齐的实际应用：

<syntaxhighlight lang="html">
<div class="navbar">
  <div class="logo">Logo</div>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
  <button>Login</button>
</div>
</syntaxhighlight>

<syntaxhighlight lang="css">
.navbar {
  display: flex;
  justify-content: space-between; /* 主轴均匀分布 */
  align-items: center; /* 交叉轴居中对齐 */
  padding: 1rem;
  background: #f0f0f0;
}
</syntaxhighlight>

== 轴方向与对齐关系 ==
弹性盒的主轴方向可通过<code>flex-direction</code>改变，这将影响对齐属性的实际表现：

<mermaid>
graph LR
  A[flex-direction] --> B[row]
  A --> C[row-reverse]
  A --> D[column]
  A --> E[column-reverse]
</mermaid>

例如，当<code>flex-direction: column</code>时：
* <code>justify-content</code>控制垂直方向对齐
* <code>align-items</code>控制水平方向对齐

== 数学基础 ==
弹性对齐的空间计算遵循以下规则（以<code>space-between</code>为例）：
<math>
\text{剩余空间} = \text{容器宽度} - \sum \text{项目宽度}
</math>
<math>
\text{项目间距} = \frac{\text{剩余空间}}{\text{项目数} - 1}
</math>

== 浏览器兼容性 ==
弹性对齐在现代浏览器中完全支持（包括IE11部分支持）。建议始终添加前缀以确保兼容性：
<syntaxhighlight lang="css">
.container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
</syntaxhighlight>

== 进阶技巧 ==
1. '''动态间距'''：结合<code>margin: auto</code>可实现灵活的空间占用
2. '''嵌套弹性盒'''：多层弹性容器实现复杂布局
3. '''百分比分配'''：使用<code>flex-grow</code>控制项目扩展比例

<syntaxhighlight lang="css">
.item {
  flex-grow: 1; /* 平均分配剩余空间 */
}
.item.large {
  flex-grow: 2; /* 占用两倍空间 */
}
</syntaxhighlight>

== 总结 ==
CSS弹性对齐提供了强大的布局控制能力，通过理解主轴与交叉轴的关系，开发者可以快速实现各种复杂布局。关键点包括：
* 区分<code>justify-content</code>和<code>align-items</code>的作用方向
* 多行布局时使用<code>align-content</code>
* 单个项目可使用<code>align-self</code>覆盖默认对齐

练习时建议使用浏览器开发者工具实时调整属性值观察效果变化。

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