CSS Flex 布局：弹性布局的完全指南

1. 什么是 Flex 布局？

CSS Flexbox（弹性盒模型）是一种高效的布局方式，它可以让容器内的元素在主轴（水平或垂直）上动态排列，并自动适应不同屏幕尺寸。Flexbox 主要用于构建一维布局，即元素主要沿着**主轴（main axis）**排列，而不是像 CSS Grid 那样管理二维布局。

2. Flex 容器与子项

在使用 Flexbox 布局时，我们需要将父元素设为 display: flex;，使其成为 Flex 容器 ，然后所有子元素都会成为 Flex 子项，从而可以使用弹性布局的特性。

.container {
  display: flex;
  background-color: #f4f4f4;
  padding: 10px;
}

.item {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  margin: 5px;
}

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

3. 主轴方向 (flex-direction)

flex-direction 决定了主轴的方向，影响子项的排列方式：

• row（默认值）：从左到右（横向）
• row-reverse：从右到左（横向反转）
• column：从上到下（纵向）
• column-reverse：从下到上（纵向反转）

.container {
  display: flex;
  flex-direction: row; /* 可改为 column, row-reverse, column-reverse */
}

4. 主轴对齐 (justify-content)

justify-content 用于控制子项在主轴上的对齐方式：

• flex-start（默认）：子项靠左（横向）或靠上（纵向）排列
• flex-end：子项靠右（横向）或靠下（纵向）排列
• center：子项居中
• space-between：首尾子项贴边，中间子项平均分布
• space-around：每个子项两侧有相等间距
• space-evenly：每个子项间距完全相等

.container {
  display: flex;
  justify-content: center; /* 试试 space-between, space-around 等 */
}

5. 交叉轴对齐 (align-items)

align-items 控制子项在交叉轴上的对齐方式：

• stretch（默认）：子项填充容器高度
• flex-start：子项从交叉轴起点对齐
• flex-end：子项从交叉轴终点对齐
• center：子项在交叉轴居中
• baseline：子项的文本基线对齐

.container {
  display: flex;
  align-items: center; /* 试试 flex-start, flex-end, baseline */
}

6. 多行换行 (flex-wrap)

默认情况下，Flexbox 会尝试把所有子项放入同一行 ，如果想让子项在容器满时自动换行，可以使用 flex-wrap：

• nowrap（默认）：不换行
• wrap：自动换行
• wrap-reverse：换行但顺序反转

.container {
  display: flex;
  flex-wrap: wrap;
}

7. 伸缩比例 (flex-grow, flex-shrink, flex-basis)

Flex 子项可以通过 flex 相关属性控制其占据的空间比例：

• flex-grow：控制子项如何扩展，占据剩余空间，默认 0（不扩展）。
• flex-shrink：控制子项如何收缩，默认 1（允许收缩）。
• flex-basis：设定初始大小（可以是 auto、具体 px 值或百分比）。

.item {
  flex-grow: 1; /* 让所有子项平均分配空间 */
}

多个子项有不同 flex-grow 时，它们会按照比例分配空间。例如：

.item:nth-child(1) { flex-grow: 2; } /* 这个子项占 2 份 */
.item:nth-child(2) { flex-grow: 1; } /* 这个子项占 1 份 */
.item:nth-child(3) { flex-grow: 1; } /* 这个子项占 1 份 */

8. 复杂布局示例

我们可以结合上述属性创建一个响应式布局：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: lightgray;
}

.item {
  flex: 1;
  min-width: 100px;
  text-align: center;
  padding: 20px;
  background-color: steelblue;
  color: white;
  margin: 5px;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

9. 总结

Flexbox 提供了一种灵活的布局方式，可以轻松实现水平和垂直居中、动态调整子项大小、创建响应式布局等。掌握 flex-direction、justify-content、align-items、flex-grow 等核心属性后，就可以轻松构建现代化的网页布局。

你是否已经在项目中使用 Flexbox？如果遇到问题或有更好的实践，欢迎交流！ 🚀