编辑“︁CSS弹性容器”︁（章节）

= CSS弹性容器 =

CSS弹性容器（Flex Container）是CSS弹性盒布局（Flexbox）的核心组成部分，用于创建灵活的、响应式的布局结构。通过将元素声明为弹性容器，可以控制其子元素（弹性项目）的排列方式、对齐方式和空间分配。

== 基本概念 ==
弹性容器通过设置<code>display: flex</code>或<code>display: inline-flex</code>来定义。其子元素自动成为弹性项目（Flex Items），并遵循弹性盒布局规则。

弹性容器具有两条轴线：
* '''主轴（Main Axis）'''：默认水平方向（从左到右），可通过<code>flex-direction</code>修改
* '''交叉轴（Cross Axis）'''：与主轴垂直的轴线

=== 代码示例 ===
<syntaxhighlight lang="css">
/* 定义一个弹性容器 */
.container {
  display: flex;
  border: 2px solid #333;
  padding: 10px;
}

/* 弹性项目样式 */
.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 5px;
}
</syntaxhighlight>

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

'''输出效果'''：
三个100px×100px的蓝色方块水平排列在容器中，默认从左到右排列。

== 容器属性详解 ==
弹性容器提供了一系列属性来控制其子元素的布局：

=== flex-direction ===
定义主轴方向：
* <code>row</code>（默认）：水平方向，从左到右
* <code>row-reverse</code>：水平方向，从右到左
* <code>column</code>：垂直方向，从上到下
* <code>column-reverse</code>：垂直方向，从下到上

=== flex-wrap ===
控制项目是否换行：
* <code>nowrap</code>（默认）：不换行
* <code>wrap</code>：换行
* <code>wrap-reverse</code>：反向换行

=== justify-content ===
定义项目在主轴上的对齐方式：
* <code>flex-start</code>（默认）：向主轴起点对齐
* <code>flex-end</code>：向主轴终点对齐
* <code>center</code>：居中对齐
* <code>space-between</code>：两端对齐，项目间隔相等
* <code>space-around</code>：每个项目两侧间隔相等
* <code>space-evenly</code>：项目与容器边缘及项目间间隔完全相等

=== align-items ===
定义项目在交叉轴上的对齐方式：
* <code>stretch</code>（默认）：拉伸填满容器高度
* <code>flex-start</code>：向交叉轴起点对齐
* <code>flex-end</code>：向交叉轴终点对齐
* <code>center</code>：居中对齐
* <code>baseline</code>：基线对齐

=== align-content ===
定义多行项目在交叉轴上的对齐方式（仅当有多行时有效）：
* <code>stretch</code>（默认）：拉伸填满容器高度
* <code>flex-start</code>：向交叉轴起点对齐
* <code>flex-end</code>：向交叉轴终点对齐
* <code>center</code>：居中对齐
* <code>space-between</code>：两端对齐，行间隔相等
* <code>space-around</code>：每行两侧间隔相等

== 轴系关系图 ==
<mermaid>
graph TD
    A[弹性容器] --> B[主轴 Main Axis]
    A --> C[交叉轴 Cross Axis]
    B --> D[方向: row/row-reverse/column/column-reverse]
    C --> E[与主轴垂直]
</mermaid>

== 综合示例 ==
<syntaxhighlight lang="css">
.container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: flex-start;
  height: 400px;
  background-color: #f0f0f0;
}
</syntaxhighlight>

== 数学关系 ==
弹性布局中的空间分配遵循以下公式：
<math>
\text{剩余空间} = \text{容器尺寸} - \sum(\text{项目基础尺寸})
</math>

剩余空间将根据项目的<code>flex-grow</code>和<code>flex-shrink</code>属性进行分配。

== 实际应用场景 ==
1. '''导航菜单'''：轻松创建水平或垂直导航
2. '''卡片布局'''：均匀分布响应式卡片
3. '''表单控件'''：对齐表单标签和输入框
4. '''居中元素'''：简单实现水平和垂直居中
5. '''媒体对象'''：图文混排布局

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

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

<syntaxhighlight lang="html">
<nav class="nav">
  <div class="nav-item">首页</div>
  <div class="nav-item">产品</div>
  <div class="nav-item">关于</div>
  <div class="nav-item">联系</div>
</nav>
</syntaxhighlight>

== 浏览器兼容性 ==
现代浏览器全面支持Flexbox，包括：
* Chrome 29+
* Firefox 28+
* Safari 9+
* Edge 12+
* iOS Safari 9.2+
* Android 4.4+

对于旧版浏览器，建议使用autoprefixer等工具添加前缀。

== 最佳实践 ==
1. 优先使用<code>flex</code>简写属性
2. 合理使用<code>min-width</code>/<code>max-width</code>限制项目尺寸
3. 考虑移动设备上的布局变化
4. 结合媒体查询创建响应式布局
5. 避免过度嵌套弹性容器

== 常见问题 ==
'''Q: 为什么我的弹性项目不换行？'''
A: 确保设置了<code>flex-wrap: wrap</code>并且容器宽度有限制。

'''Q: 如何实现垂直居中？'''
A: 使用<code>align-items: center</code>或<code>justify-content: center</code>（取决于主轴方向）。

'''Q: 弹性项目宽度不按预期工作？'''
A: 弹性项目的宽度会受到<code>flex</code>属性影响，考虑使用<code>flex-basis</code>或设置<code>min-width</code>。

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