CSS回顾-Flex弹性盒布局

弹性盒布局（Flexible Box Layout，简称 Flex）是 CSS3 中革命性的布局方案，它能以更简单的方式实现复杂的网页布局。本文用生活化比喻+代码案例，带你轻松掌握 Flex 布局的所有核心知识点。

---

一、Flex 布局的本质：玩具收纳箱

想象一个收纳箱（Flex 容器）里摆放着多个玩具（Flex 项目），你可以通过 2 个轴控制玩具的排列方式：

• 主轴（Main Axis）：默认水平方向（可调整）
• 交叉轴（Cross Axis）：与主轴垂直的方向

如上图所示，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

二、容器属性：控制整体布局

1. display: flex

.container {
  display: flex; /* 或 inline-flex */
}

作用：声明当前元素为弹性容器，子元素自动成为弹性项目

2. flex-direction：主轴方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

效果：

• row（默认）：水平排列 →
• row-reverse：水平反向排列 ←
• column：垂直排列 ↓
• column-reverse：垂直反向排列 ↑

3. flex-wrap：换行控制

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：不换行（项目会压缩）
• wrap：自动换行（类似书籍排版）
• wrap-reverse：反向换行

4. flex-flow：方向+换行简写

.container {
  flex-flow: column wrap; /* direction + wrap */
}

5. justify-content：主轴对齐

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

效果：

• flex-start：靠左对齐
• flex-end：靠右对齐
• center：居中
• space-between：两端对齐
• space-around：项目两侧等距
• space-evenly：间距均匀

6. align-items：交叉轴对齐（单行）

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

• stretch（默认）：拉伸填满高度
• flex-start：向上对齐
• flex-end：向下对齐
• center：居中对齐
• baseline：基线对齐（文字底部对齐）

7. align-content：交叉轴对齐（多行）

.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

• stretch（默认）：拉伸填满高度
• flex-start：向上对齐
• flex-end：向下对齐
• center：居中对齐
• space-between：两端对齐
• space-around：项目两侧等距

注意：仅当有多行内容时生效

三、项目属性：控制单个元素

1. order：排序优先级

.item {
  order: 5; /* 默认0，数值越小越靠前 */
}

作用：通过数值控制显示顺序

2. flex-grow：放大比例

.item {
  flex-grow: 2; /* 默认0（不放大） */
}

计算规则：剩余空间按比例分配
示例：三个项目分别设置 1、2、3 → 分得 1/6, 2/6, 3/6 的剩余空间

3. flex-shrink：缩小比例

.item {
  flex-shrink: 3; /* 默认1（允许缩小） */
}

计算规则：空间不足时按比例缩小

4. flex-basis：初始尺寸

.item {
  flex-basis: 200px | 30%; /* 默认auto */
}

优先级：比 width 更高

5. flex：综合简写

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: 1 1 200px; /* grow shrink basis */
}

常用值：

• flex: 1 → 1 1 0%
• flex: none → 0 0 auto

6. align-self：个性化对齐

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

作用：覆盖容器的 align-items 设置

四、经典布局实战

1. 水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 等宽三栏布局

.item {
  flex: 1; /* 三个项目均分宽度 */
}

3. 圣杯布局

.main {
  flex: 1;
}
.aside {
  width: 200px;
}

4. 流式布局

.container {
  flex-wrap: wrap;
}
.item {
  flex: 1 0 200px; /* 最小200px，自动换行 */
}

五、Flex 布局使用口诀

主轴方向定乾坤，
换行控制要记真。
对齐方式分轴用，
项目属性更细分。
简写属性效率高，
经典布局脑中存。

六、注意事项

1. 旧版浏览器需加前缀 -webkit-
2. 移动端优先：Flex 在移动端支持度更好
3. 避免滥用：简单布局建议优先使用传统方案

七、总结

Flex 弹性盒布局通过简单的属性设置，就能实现复杂的排列效果，是现代网页设计中不可或缺的工具。掌握 Flex 布局的关键在于理解容器和项目的属性作用，以及主轴与交叉轴的关系。通过不断实践，你会发现用 Flex 布局解决布局问题变得轻而易举，网页的适配性和美观度也会大幅提升。