编辑“︁CSS弹性项目”︁（章节）

= CSS弹性项目 =

'''CSS弹性项目'''（Flex Items）是CSS弹性盒布局（Flexbox）中的核心组成部分，指直接包含在弹性容器（Flex Container）内的子元素。弹性项目通过弹性盒模型提供的属性进行灵活排列、对齐和尺寸调整，适用于构建响应式布局。

== 基本概念 ==

弹性项目的行为由其父容器（通过<code>display: flex</code>或<code>display: inline-flex</code>定义）和项目自身的属性共同控制。以下是关键特性：
* 默认沿'''主轴'''（Main Axis）排列，方向由<code>flex-direction</code>决定（行或列）。
* 可通过<code>flex-grow</code>、<code>flex-shrink</code>和<code>flex-basis</code>调整尺寸。
* 支持通过<code>align-self</code>覆盖容器的对齐方式。

== 弹性项目属性 ==

以下是控制弹性项目的主要属性：

=== <code>order</code> ===
定义项目的排列顺序，数值越小越靠前。默认值为0。

<syntaxhighlight lang="css">
.item {
  order: 2; /* 默认0，此项目将后移 */
}
</syntaxhighlight>

=== <code>flex-grow</code> ===
定义项目在剩余空间中的放大比例。默认值为0（不放大）。

<syntaxhighlight lang="css">
.item {
  flex-grow: 1; /* 占据剩余空间 */
}
</syntaxhighlight>

=== <code>flex-shrink</code> ===
定义项目在空间不足时的缩小比例。默认值为1（允许缩小）。

<syntaxhighlight lang="css">
.item {
  flex-shrink: 0; /* 禁止缩小 */
}
</syntaxhighlight>

=== <code>flex-basis</code> ===
定义项目的初始大小。默认值为<code>auto</code>（参考内容尺寸）。

<syntaxhighlight lang="css">
.item {
  flex-basis: 200px; /* 初始宽度200px */
}
</syntaxhighlight>

=== <code>flex</code>（简写） ===
合并<code>flex-grow</code>、<code>flex-shrink</code>和<code>flex-basis</code>。常用值：
* <code>flex: 1</code> → <code>1 1 0</code>
* <code>flex: auto</code> → <code>1 1 auto</code>

=== <code>align-self</code> ===
覆盖容器的<code>align-items</code>设置，控制单个项目的交叉轴对齐方式。

<syntaxhighlight lang="css">
.item {
  align-self: center; /* 垂直居中 */
}
</syntaxhighlight>

== 代码示例 ==

以下示例展示弹性项目的实际应用：

<syntaxhighlight lang="html">
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

<style>
.container {
  display: flex;
  gap: 10px;
}
.item1 { flex: 1; background: #ff9; }
.item2 { flex: 2; align-self: flex-end; background: #9f9; }
.item3 { flex: 1; order: -1; background: #99f; }
</style>
</syntaxhighlight>

'''输出效果：'''
1. Item 3因<code>order: -1</code>排在最左侧。
2. Item 2宽度是其他项目的两倍（<code>flex: 2</code>）且底部对齐。
3. 剩余空间按<code>flex-grow</code>比例分配。

== 实际应用场景 ==

=== 导航栏 ===
弹性项目可轻松实现自适应导航菜单：
<syntaxhighlight lang="css">
.nav {
  display: flex;
}
.nav-item {
  flex: 1; /* 均分宽度 */
  text-align: center;
}
</syntaxhighlight>

=== 卡片布局 ===
控制卡片在不同屏幕尺寸下的行为：
<syntaxhighlight lang="css">
.card {
  flex: 1 0 250px; /* 最小宽度250px，允许增长 */
}
</syntaxhighlight>

== 视觉化模型 ==

<mermaid>
flowchart LR
  A[Flex Container] --> B[Flex Item 1]
  A --> C[Flex Item 2]
  A --> D[Flex Item 3]
  style B fill:#f9f,stroke:#333
  style C fill:#9f9,stroke:#333
  style D fill:#99f,stroke:#333
</mermaid>

== 数学基础 ==

弹性项目的最终尺寸计算涉及以下公式（主轴方向为行时）：
<math>
\text{最终宽度} = \text{flex-basis} + \left( \frac{\text{flex-grow}}{\sum \text{flex-grow}} \times \text{剩余空间} \right)
</math>

== 浏览器兼容性 ==
所有现代浏览器均支持弹性项目属性。对于旧版浏览器（如IE10），需添加<code>-ms-</code>前缀。

== 最佳实践 ==
* 优先使用<code>flex</code>简写属性。
* 避免滥用<code>order</code>，可能影响可访问性。
* 结合<code>min-width</code>/<code>max-width</code>限制弹性项目尺寸。

== 参见 ==
* [[CSS弹性盒布局]]（父概念）
* [[CSS网格布局]]（替代方案）

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