电池模组布局与结构设计 - 第3节
3. Flexbox弹性布局
第3章 Flexbox弹性布局
# 3、Flexbox弹性布局：主轴与交叉轴、flex容器属性、flex项目属性、对齐方式
## 3.1 主轴与交叉轴：Flexbox的坐标系
Flexbox布局的核心在于**主轴**与**交叉轴**的二维坐标系。理解这两个轴是掌握弹性布局的基石。
- **主轴（Main Axis）**：由 `flex-direction` 属性定义的方向。默认值为 `row`，即水平方向从左到右。当设置为 `column` 时，主轴变为垂直方向从上到下。
- **交叉轴（Cross Axis）**：垂直于主轴的另一个方向。当主轴为 `row` 时，交叉轴为垂直方向；当主轴为 `column` 时，交叉轴为水平方向。
### 主轴方向与起始线
主轴具有明确的**起始线（main start）** 和**结束线（main end）**，交叉轴同样具有**交叉起始线（cross start）** 和**交叉结束线（cross end）**。Flex项目默认从起始线开始排列，沿主轴方向依次放置。
关键概念：主轴方向决定了项目的排列方向，交叉轴方向决定了项目在垂直方向上的对齐方式。所有Flexbox的对齐属性都基于这两个轴进行工作。
### 内联SVG：主轴与交叉轴示意图
## 3.2 Flex容器属性
将父元素设置为 `display: flex` 或 `display: inline-flex` 后，该元素即成为**Flex容器**，其直接子元素自动成为**Flex项目**。容器属性控制项目的整体排列行为。
### 3.2.1 flex-direction：主轴方向
| 属性值 | 主轴方向 | 描述 |
|--------|----------|------|
| `row` | 水平从左到右 | 默认值，项目水平排列 |
| `row-reverse` | 水平从右到左 | 项目水平反向排列 |
| `column` | 垂直从上到下 | 项目垂直排列 |
| `column-reverse` | 垂直从下到上 | 项目垂直反向排列 |
### 3.2.2 flex-wrap：换行控制
| 属性值 | 行为 |
|--------|------|
| `nowrap` | 默认值，所有项目在一行内排列，可能溢出 |
| `wrap` | 项目在容器内自动换行，从交叉轴起始线开始 |
| `wrap-reverse` | 项目换行，但从交叉轴结束线开始 |
### 3.2.3 flex-flow：简写属性
`flex-flow` 是 `flex-direction` 和 `flex-wrap` 的简写形式：
css
/* 语法：flex-flow: ; */
.container {
flex-flow: row wrap;
}
### 3.2.4 justify-content：主轴对齐
控制项目在主轴方向上的分布方式：
| 属性值 | 效果 |
|--------|------|
| `flex-start` | 默认值，项目从主轴起始线开始排列 |
| `flex-end` | 项目从主轴结束线开始排列 |
| `center` | 项目在主轴上居中 |
| `space-between` | 项目均匀分布，首尾项目紧贴容器边缘 |
| `space-around` | 项目均匀分布，每个项目两侧间距相等 |
| `space-evenly` | 项目均匀分布，所有间距完全相等 |
### 3.2.5 align-items：交叉轴对齐
控制项目在交叉轴方向上的对齐方式：
| 属性值 | 效果 |
|--------|------|
| `stretch` | 默认值，项目拉伸填满交叉轴高度 |
| `flex-start` | 项目从交叉轴起始线对齐 |
| `flex-end` | 项目从交叉轴结束线对齐 |
| `center` | 项目在交叉轴上居中 |
| `baseline` | 项目按文本基线对齐 |
### 3.2.6 align-content：多行对齐
当 `flex-wrap: wrap` 且有多行项目时，控制行在交叉轴上的分布：
| 属性值 | 效果 |
|--------|------|
| `stretch` | 默认值，行拉伸填满交叉轴 |
| `flex-start` | 行从交叉轴起始线排列 |
| `flex-end` | 行从交叉轴结束线排列 |
| `center` | 行在交叉轴上居中 |
| `space-between` | 行均匀分布，首尾行紧贴边缘 |
| `space-around` | 行均匀分布，每行两侧间距相等 |
### 内联SVG：justify-content 与 align-items 对比
## 3.3 Flex项目属性
每个Flex项目都可以单独设置属性，控制其大小、伸缩行为和排列顺序。
### 3.3.1 flex-grow：扩展比例
定义项目在主轴方向上的**扩展能力**。默认值为 `0`，表示即使有剩余空间，项目也不扩展。
css
.item {
flex-grow: 1; /* 项目会等分剩余空间 */
}
- 所有项目 `flex-grow: 1`：剩余空间被所有项目等分
- 某个项目 `flex-grow: 2`：该项目获得的剩余空间是其他项目的两倍
### 3.3.2 flex-shrink：收缩比例
定义项目在主轴方向上的**收缩能力**。默认值为 `1`，表示空间不足时项目会等比例收缩。
css
.item {
flex-shrink: 0; /* 项目不会收缩，可能溢出 */
}
### 3.3.3 flex-basis：初始大小
定义项目在主轴方向上的**初始尺寸**。默认值为 `auto`，即项目本身的宽度或高度。
| 属性值 | 效果 |
|--------|------|
| `auto` | 使用项目自身的尺寸 |
| `0` | 项目初始尺寸为0，完全由flex-grow决定 |
| 具体值 | 如 `200px`、`50%` 等 |
### 3.3.4 flex：简写属性
`flex` 是 `flex-grow`、`flex-shrink`、`flex-basis` 的简写：
css
/* 常用简写值 */
.item {
flex: 1; /* flex: 1 1 0% */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto */
flex: 0 0 200px; /* 固定宽度200px，不伸缩 */
}
### 3.3.5 align-self：单个项目对齐
覆盖容器 `align-items` 属性，为单个项目设置独立的交叉轴对齐方式：
css
.item-special {
align-self: flex-end; /* 该项目单独对齐到底部 */
}
### 3.3.6 order：排列顺序
控制项目的排列顺序，默认值为 `0`。数值越小，排列越靠前：
css
.item-first {
order: -1; /* 排在最前面 */
}
.item-last {
order: 1; /* 排在最后面 */
}
### 内联SVG：flex项目属性示意
## 3.4 对齐方式详解
Flexbox提供了强大的对齐能力，理解不同对齐属性的作用范围至关重要。
### 3.4.1 主轴对齐 vs 交叉轴对齐
| 对齐类型 | 容器属性 | 项目属性 | 作用方向 |
|----------|----------|----------|----------|
| 主轴对齐 | `justify-content` | — | 水平（row）或垂直（column） |
| 交叉轴对齐 | `align-items` | `align-self` | 垂直（row）或水平（column） |
| 多行对齐 | `align-content` | — | 交叉轴方向的行分布 |
### 3.4.2 实际应用场景
**场景一：水平垂直居中**
css
.container {
display: flex;
justify-content: center;
align-items: center;
}
**场景二：两端对齐导航栏**
css
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
**场景三：等分布局**
css
.columns {
display: flex;
}
.column {
flex: 1; /* 每个列等宽 */
}
### 3.4.3 对齐优先级
当 `align-content` 和 `align-items` 同时存在时，`align-content` 优先级更高（仅对多行有效）。`align-self` 的优先级高于 `align-items`。
实用技巧：使用 margin: auto 在Flex项目中可以实现特殊的对齐效果。例如，在导航栏中，给最后一个项目设置 margin-left: auto 可以将其推到右侧。
### 内联SVG：对齐方式综合示例
## 3.5 实战代码示例
以下是一个完整的Flexbox布局示例，展示容器属性和项目属性的综合应用：
css
/* 容器样式 */
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
gap: 16px;
padding: 20px;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 8px;
min-height: 300px;
}
/* 项目样式 */
.flex-item {
flex: 1 1 200px; /* 可伸缩，基础宽度200px */
padding: 16px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* 特殊项目 */
.flex-item.featured {
flex: 2 1 300px; /* 占据更多空间 */
align-self: center; /* 单独垂直居中 */
order: -1; /* 排列在最前面 */
}
注意事项：
- Flexbox是一维布局模型，适合处理单行或单列布局。对于复杂的二维布局，建议使用Grid。
flex-basis 的优先级高于 width 或 height，当两者同时存在时，flex-basis 生效。- 使用
gap 属性可以方便地设置项目间距，兼容性良好。
Flexbox弹性布局是现代CSS布局的核心技术之一，掌握主轴与交叉轴的概念、容器属性与项目属性的配合使用，能够解决绝大多数常见的布局需求。在实际项目中，建议结合具体场景选择合适的对齐方式和伸缩策略，以达到最佳的布局效果。