编辑“︁CSS弹性分布”︁

= CSS弹性分布 =

'''CSS弹性分布'''（Flex Distribution）是[[CSS弹性盒布局]]（Flexbox）中的核心概念，用于控制弹性容器（flex container）内的项目（flex items）在主轴上如何分配空间。通过调整弹性分布属性，开发者可以灵活地控制项目的对齐方式、间距以及剩余空间的分配方式。

== 简介 ==
弹性分布主要通过以下几个属性实现：
* <code>justify-content</code>：控制主轴（main axis）上的项目分布。
* <code>align-items</code>：控制交叉轴（cross axis）上的项目对齐。
* <code>align-content</code>：控制多行弹性容器在交叉轴上的空间分布。
* <code>gap</code>：设置项目之间的间距。

这些属性使得开发者能够轻松实现复杂的布局，而无需依赖浮动或定位。

== justify-content 属性 ==
<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;
  width: 100%;
  border: 1px solid #ccc;
}

.item {
  width: 80px;
  height: 80px;
  background: #4CAF50;
}
</syntaxhighlight>

'''HTML 结构：'''
<syntaxhighlight lang="html">
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
</syntaxhighlight>

'''输出效果：'''
三个绿色方块均匀分布在容器中，首尾方块紧贴容器边缘。

== align-items 属性 ==
<code>align-items</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;
  height: 200px;
  border: 1px solid #ccc;
}

.item {
  width: 80px;
  height: 60px;
  background: #2196F3;
}
</syntaxhighlight>

'''输出效果：'''
蓝色方块在容器中垂直居中对齐。

== align-content 属性 ==
<code>align-content</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>stretch</code>（默认值）

=== 代码示例 ===
<syntaxhighlight lang="css">
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  height: 300px;
  border: 1px solid #ccc;
}

.item {
  width: 100px;
  height: 50px;
  background: #FF9800;
}
</syntaxhighlight>

'''输出效果：'''
多行橙色方块在容器中均匀分布，每行周围有相等的空间。

== gap 属性 ==
<code>gap</code> 用于设置项目之间的间距，替代传统的 <code>margin</code> 方式。语法为：
<syntaxhighlight lang="css">
.container {
  display: flex;
  gap: 20px; /* 设置项目间距为 20px */
}
</syntaxhighlight>

== 实际应用案例 ==
弹性分布常用于以下场景：
1. '''导航栏布局'''：使用 <code>justify-content: space-between</code> 让导航项均匀分布。
2. '''卡片网格'''：结合 <code>flex-wrap</code> 和 <code>gap</code> 实现响应式网格。
3. '''居中元素'''：使用 <code>justify-content: center</code> 和 <code>align-items: center</code> 实现水平和垂直居中。

=== 导航栏示例 ===
<syntaxhighlight lang="css">
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #333;
}

.nav-item {
  color: white;
  padding: 10px;
}
</syntaxhighlight>

== 图表说明 ==
以下是一个弹性分布的可视化示例：
<mermaid>
graph LR
  A[flex-start] -->|项目靠左| B
  C[center] -->|项目居中| B
  D[space-between] -->|项目均匀分布| B
  B[主轴方向]
</mermaid>

== 数学公式 ==
弹性分布的空间计算可以用以下公式表示（以 <code>space-around</code> 为例）：
<math>
\text{项目间距} = \frac{\text{剩余空间}}{\text{项目数量} \times 2}
</math>

== 总结 ==
CSS弹性分布是弹性盒布局的核心功能，通过调整 <code>justify-content</code>、<code>align-items</code>、<code>align-content</code> 和 <code>gap</code> 属性，开发者可以轻松实现灵活且响应式的布局。初学者应从简单的单轴对齐开始，逐步掌握多行布局和复杂分布技巧。

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