CSS Flexbox 完全指南：从基础到实战布局

📅 2026-07-10 · 📖 阅读约9分钟 · 🏷️ CSS / Flexbox / 布局

Flexbox（弹性盒子）是 CSS3 引入的一维布局模型，彻底改变了前端布局的方式。从垂直居中到响应式导航，从卡片列表到复杂的应用框架，Flexbox 都能优雅解决。本文从基础概念到实战案例，带你全面掌握 Flexbox。

一、什么是 Flexbox

Flexbox 是 Flexible Box 的缩写，意为弹性盒子。它的核心思想是：让容器内的子元素能够自动伸缩、对齐和分配空间，即使容器尺寸不确定或动态变化。

说它是"一维"布局，是因为 Flexbox 一次只能处理一个方向（主轴）上的布局。与之相对的 CSS Grid 是二维布局，同时处理行和列。

1.1 基本概念

Flex 容器（Flex Container）：设置了 display: flex 的元素
Flex 项目（Flex Item）：容器的直接子元素
主轴（Main Axis）：项目排列的主要方向
交叉轴（Cross Axis）：与主轴垂直的方向
主轴起点/终点：main-start / main-end
交叉轴起点/终点：cross-start / cross-end

二、容器属性（Container Properties）

2.1 display: flex

定义一个 Flex 容器。设为 flex 是块级容器，设为 inline-flex 是行内容器。

.container {
  display: flex;
}

2.2 flex-direction：主轴方向

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

row（默认）：从左到右，水平排列
row-reverse：从右到左
column：从上到下，垂直排列
column-reverse：从下到上

2.3 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：所有间距完全相等

2.4 align-items：交叉轴对齐

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

stretch（默认）：拉伸填满容器
flex-start：靠交叉轴起点
flex-end：靠交叉轴终点
center：居中（垂直居中就是靠它）
baseline：按基线对齐

2.5 flex-wrap：换行方式

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

默认 nowrap 不换行，空间不够时项目被压缩。设为 wrap 会自动换行。

2.6 flex-flow：简写

flex-direction 和 flex-wrap 的简写属性：

.container {
  flex-flow: row wrap;
}

2.7 align-content：多行对齐

当有多行时（设置了 wrap），控制行与行之间在交叉轴上的对齐方式，类似 justify-content 但是作用于交叉轴的多行。

三、项目属性（Item Properties）

3.1 flex-grow：放大比例

定义项目的放大比例，默认值 0。值越大分得的剩余空间越多。

3.2 flex-shrink：缩小比例

定义项目的缩小比例，默认值 1。空间不足时按比例缩小。

3.3 flex-basis：基准尺寸

在分配剩余空间之前，项目的初始大小，默认 auto。

3.4 flex：简写

.item {
  flex: 0 1 auto; /* 默认值 */
  flex: 1;        /* 均匀分配，等于 flex: 1 1 0% */
}

3.5 align-self：单独对齐

覆盖 align-items，给单个项目设置不同的交叉轴对齐方式。

3.6 order：排列顺序

控制项目的排列顺序，数值越小越靠前，默认 0。可以是负数。

四、实战案例

案例一：完美居中

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

三行代码实现水平垂直都居中，这是 Flexbox 最经典的应用。

案例二：响应式导航栏

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
.nav-links {
  display: flex;
  gap: 24px;
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
}

案例三：卡片列表布局

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card {
  flex: 1 1 300px;
  min-width: 280px;
}

使用 flex: 1 1 300px 实现卡片自适应，空间够就并排，不够就换行。

案例四：Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

内容不足时页脚始终贴在底部，内容多时自动撑开。

五、Flexbox vs Grid

怎么选？简单的判断方法：

一维布局（单行或单列）→ Flexbox
二维布局（同时有行和列）→ CSS Grid
组件级布局 → Flexbox 更灵活
页面级整体布局 → Grid 更强大

实际项目中两者常配合使用：Grid 搭大框架，Flexbox 处理组件内细节。

六、常见坑点

flex-shrink 导致内容溢出：项目内容过长会被压缩，设 flex-shrink: 0 或 min-width: 0 解决
margin: auto 的妙用：在 flex 项目上用 margin-left: auto 可以轻松实现推到右边的效果
gap vs margin：用 gap 设置间距比一个个加 margin 干净得多
flex: 1 的陷阱：flex: 1 等于 flex: 1 1 0%，基准是 0 而不是内容宽度

总结

Flexbox 是现代前端开发必备的基础技能。掌握了容器的 6 个属性和项目的 6 个属性，绝大多数布局问题都能迎刃而解。建议在日常开发中多练多用，很快就能形成肌肉记忆。