CSS Flexbox完整指南: 在2026年掌握弹性布局

CSS Flexbox是一种一维布局模型，用来在容器中分配空间并对齐元素。它比早期依赖float、table或absolute positioning的方案更直观、更稳定，也更适合响应式界面。

Flexbox最大的价值在于，它把很多以前很麻烦的布局问题变得简单，例如垂直居中、均匀分布、组件内部对齐、可变宽度内容的排列等。

• 轻松居中: 水平和垂直居中都很直接
• 灵活伸缩: 元素可以自动增长、收缩和换行
• 更适合响应式: 很多场景下不需要复杂的媒体查询

阅读时如果想同步试验，可以打开我们的Flexbox playground。

Flexbox从父元素设置display: flex开始。设置后，直接子元素都会成为flex item。

默认情况下，项目会横向排列、不换行、从主轴起点开始，并在交叉轴方向上拉伸。

值	主轴	方向
row	水平	从左到右
row-reverse	水平	从右到左
column	垂直	从上到下
column-reverse	垂直	从下到上

flex-wrap控制是否换行，flex-flow则把direction和wrap合并写在一起。

justify-content控制主轴方向上的对齐，align-items控制交叉轴方向上的对齐。

属性	作用
justify-content: center	主轴居中
space-between	项目之间平均分配空白
align-items: center	交叉轴居中
align-items: stretch	沿交叉轴拉伸项目

当有多行时，可以用align-content控制多行之间的分布。而要控制项目之间的间距，gap通常是最干净的方案。

这些属性决定每个元素如何占用空间。

• flex-grow: 有剩余空间时增长多少
• flex-shrink: 空间不足时收缩多少
• flex-basis: 分配前的基础尺寸

flex是它们的简写。flex: 1会让元素灵活分配空间，flex: none表示固定不变，flex: 0 0 250px则可以定义一个固定尺寸的项目。

align-self允许单个项目覆盖默认对齐方式，order则可以在不改HTML的情况下改变视觉顺序。

Flexbox非常适合常见UI模式。

• 完美居中: display: flex; justify-content: center; align-items: center;
• 导航栏: justify-content: space-between让logo和菜单分居两侧
• Sticky footer: 外层列布局加min-height: 100vh，主内容设为flex: 1
• 最后一个元素推到右侧: 使用margin-left: auto
• 侧边栏 + 主内容: 侧边栏固定，内容区自适应

这些模式都可以在Flexbox playground里直接测试。

卡片网格里，一个常见写法是容器使用display: flex; flex-wrap: wrap; gap: 24px;，每张卡片使用flex: 1 1 300px;。这样卡片既能保持最小宽度，也会根据可用空间自动重新排列。

holy grail layout是指包含header、footer、左右sidebar和主内容区的经典页面结构。通常做法是外层wrapper用列方向的flex，中间区域再用一层横向flex。

• 外层wrapper: display: flex; flex-direction: column; min-height: 100vh;
• 中间区域: display: flex; flex: 1;
• sidebar: flex: 0 0 200px;
• 主内容: flex: 1;

Flexbox适合一维布局，CSS Grid更适合二维布局。也就是说，如果你主要处理一行或一列，用Flexbox会更自然；如果你要同时控制行和列，Grid会更强大。

• Flexbox适合导航栏、按钮组、表单、卡片内部布局
• Grid适合页面整体结构和复杂网格系统

维度	Flexbox	Grid
布局类型	1D	2D
优势	对齐与分配	结构设计
常见用途	组件内部	页面框架

实际项目中，两者往往一起使用。你可以在Flexbox playground和CSS Grid generator中对比体验。

使用Flexbox时常见的问题包括：

• 忘记flex-shrink默认值是1
• 在flex环境里只用width而不用flex-basis
• 忘记设置min-width: 0导致文本无法正常截断
• 试图只靠Flexbox完成复杂二维网格

一些实用技巧：

• margin-left: auto可以把元素推到另一侧
• flex: 1 1 0%常常更适合均匀分配空间
• 嵌套flex容器是构建复杂界面的常见方式
• order只改变视觉顺序，不改变无障碍阅读顺序

想更快调试和练习，可以使用我们的interactive Flexbox playground。