我以前以为我懂 flexbox，于是给容器加个 display: flex，然后就祈祷布局如我所愿。

有时候确实有效，但大部分时候，我得到了一堆“各自为政”的列，完全不是我想要的样子。

直到我发现了这三个简单模式，一切都变了。

1. 核心问题：为什么布局总是乱？

你创建了 3 个完美的列，宽度相等，间距美观，你感到自己很帅。

然后你添加了一些内容——这里有一段长文字，那里有个短标题。

突然第 2 列变得巨大，第 3 列却瘦得像竹竿。

为什么？

因为 flexbox 默认会让内容决定布局。

但这种做法实际上在破坏你的设计！

2. 模式一：真正的等宽列

你想要实现真正的等宽列，该如何实现？

大多数人一开始会这样写：

/* 看起来很合理，对吧？ */
.column {
  width: 33.33%;
}

但如果你是 2 列、4 列、5 列呢？如果一个项目有内边距呢？

真正有效的解决方案是：

.even-columns {
  display: flex;
}

.even-columns > * {
  flex-basis: 100%;
}

就这么简单，两行代码搞定。

为什么要设置 flex-basis: 100%？

因为你在告诉每一列都保持相同的大小。

由于默认允许收缩，它们会等比例缩小来适应空间。它们会协调分配空间，而不是各自为政。

当你删除一列时**，也**没问题，剩余列会自动扩展填满空间。添加一列时，也是如此。

我经常用这个模式，导航菜单、功能卡片、团队成员介绍——任何需要列的地方都可以用。

3. 模式二：智能网格（告别媒体查询）

如果你想要一个能根据可用空间自动调整的网格，你该如何实现？

以前我们要写一堆的媒体查询，但我们可没时间搞这个了！

直接上我们的解决方案：

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

.gridish > * {
  flex: 1 1 15rem;
}

让我解释下这个设置：

• flex-wrap: wrap 的意思是：“如果空间不够，把项目换到下一行”

• flex: 1 1 15rem 的意思是：“我可以扩大，也允许收缩，理想大小是 15rem”

• 合起来就是：“尽可能保持 15rem 宽，但可以扩展填满空间或换行”

于是当你调整屏幕大小时，项目会自动流动。

三列变成两列，再变成一列，然后又变回三列。无需断点，无需媒体查询，智能布局。

我把这个用在博客布局上，每个文章卡片至少需要 15rem 才能好看。于是在宽屏上，显示四列。在平板上，显示两到三列。在手机上，堆叠显示，布局自动调整。

关键在于选择合适的 flex-basis 值。

太小了，移动端会有尴尬的超窄列。太大了，什么都并排不了。我通常从 15rem 开始，根据实际内容调整。

4. 模式三：内容-侧边栏保持黄金比例

现在我们实现一个典型的博客布局：

主体内容占大头，右边一个固定宽度的侧边栏。

大部分教程会让你用百分比或固定宽度。

但当屏幕变窄时，这两种方法都会失败——要不然内容变得不可读，要不然侧边栏变得非常窄。

其实你应该这样写：

.content-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.main-content {
  flex: 1 1 70%;
  min-width: 25ch;
}

.sidebar {
  flex: 1 1 30%;
  min-width: 15ch;
}

关键在于 min-width。ch 单位代表字符宽度， 25ch 意思是“绝不小于 25 个字符”。

此时会发生什么呢？

• 宽屏幕： 70/30 分割，看起来很专业

• 中等屏幕： 仍然并排，调整比例

• 窄屏幕： 当任何一列达到最小宽度时，它们就堆叠

无需断点，布局会在内容需要时自然断裂。

5. 什么时候用这些模式？

模式一（等宽列）： 导航菜单、功能卡片——任何需要等宽列的地方

模式二（智能网格）： 博客布局、图片画廊、产品网格——任何需要内容自然流动的地方

模式三（内容侧边栏）： 文章布局、仪表板面板——任何需要主要和次要内容的地方

6. 思维转变

写 CSS 的时候，我经历过“改三行 CSS，刷新十次”的抓狂时刻。

后来我慢慢懂了一个道理：布局就像搭积木，你先决定“规则”，然后让它自己长成最合适的样子。

Flexbox 的魅力不在于“精准像素控制”，而在于“给出合理约束，剩下交给它”。

今天和你分享的这三个模式，保你在大多数业务页面里稳稳当当地交付。

等把它们用熟了，再去实现更复杂的响应式细节和组合策略，也会顺手很多。

我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。