Flex 布局中容易踩的那些坑，你踩过几个？

在日常开发中，Flex 布局几乎是写页面绕不过去的一道坎。它强大、灵活，看起来也"简单易用"，但一旦涉及复杂嵌套和内容溢出，很多同学就懵了，明明写了 flex: 1，为什么内容却把整个布局撑爆了？又或者明明设置了 flex-basis: 0%，但布局偏偏不听话？

今天这篇文章，我们就来聊聊 Flex 布局中几个非常容易踩坑但极具实用价值的知识点，希望大家看完后都能成为真·Flex高手 💪。

🌱 基础热身：Flex 布局是个啥？

Flex（全称 Flexible Box）是一种 CSS3 的布局模式，最适合处理"一维方向"的布局，比如横向菜单、纵向分栏、左右结构自适应等。

使用起来也很简单，核心就两步：

css 复制代码

.parent {
  display: flex;            /* 开启 Flex 布局 */
  flex-direction: row;      /* 主轴方向，row 是默认横向 */
}

然后子元素可以设置：

css 复制代码

.child {
  flex: 1;
}

这表示"尽可能占用剩余空间"。

看到这里你可能会觉得：so easy！但别急，坑还在后面等你......

🧩 flex 缩写属性到底包含了什么？

我们经常看到这样的写法：

css 复制代码

.child {
  flex: 1;
}

其实这是一个缩写，相当于：

css 复制代码

.child {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

注意：如果你只写了 flex: 1，浏览器默认会把 flex-basis 当作 0%，而不是我们以为的 0px。

这就引出下面一个很容易被忽视的问题：0% 和 0（0px）是不同的！

🎯 `flex-basis: 0` 和 `0%` 有啥区别？

先说一句结论：

✅ 推荐大家写 flex: 1 1 0，不要写 0%，直接写数字 0 更靠谱！

为什么这么说？

flex-basis: 0 是绝对值，表示起始尺寸就是 0；
flex-basis: 0% 是百分比，要基于父容器来计算，如果父容器的尺寸是"auto"或者"受内容撑开的"，那就......很可能会出现奇怪的布局行为。

MDN 也指出：

Percentage values of flex-basis are resolved against the flex container's main size. If the container's size is indefinite, the used value becomes content.

简单说，浏览器可能会根据内容来"猜"，而不是你说了算。

所以写 flex: 1 1 0 更明确，不容易出错，建议全团队都统一用这个写法 ✅。

🧨 flex 子元素为什么有时被撑爆了？

这个问题是 Flex 布局里最常见、也最容易让人抓狂的坑之一。

比如你写了一个三段式页面布局：

html 复制代码

<div class="app">
  <div class="header">Header</div>
  <div class="content">内容很多很多很多很多...</div>
  <div class="footer">Footer</div>
</div>

css 复制代码

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header, .footer {
  flex: 0 0 60px;
}

.content {
  flex: 1 1 0;
}

你以为 .content 会自动占满剩余空间？错！如果 .content 内容很多，它会直接把自己撑大，把 .footer 都挤出去了！

为什么？

因为浏览器默认会给 Flex 子项加个 min-height: auto（或 min-width: auto），也就是说：子项至少要包住自己的内容。

这就导致了我们设置的 flex-shrink: 1 形同虚设，它根本不会去收缩。

🛠 解决方案：加上 `min-height: 0`！

只需要一行代码，立刻解决问题：

css 复制代码

.content {
  flex: 1 1 0;
  min-height: 0;     /* ✅ 关键修复点 */
  overflow: auto;     /* ✅ 如果内容很多，别忘记滚动 */
}

如果你用的是横向布局，就把 min-height 换成 min-width: 0。

🔥 为什么一定要写这个？

来自 MDN 的官方原话：

By default, flex items have a min-height (or min-width) of auto, which means their size will not shrink below their content size even if flex-shrink allows it.

就是说，默认你不设置，子元素就会自动撑开。这就是你 layout 崩坏的罪魁祸首！

🧠 总结一下本文几个关键知识点：

知识点	容易踩坑点	正确姿势
`flex` 缩写属性	`flex: 1` 实际等价于 `flex: 1 1 0%`，不是 `0px`	推荐写法 `flex: 1 1 0`
`flex-basis` 设置为 `0%`	百分比基于父容器主轴尺寸，但浏览器解析差异多	建议使用 `0` 替代
子项被内容撑爆	默认 `min-height: auto` 导致不收缩	显式加上 `min-height: 0`
内容滚动失败	忘记加 `overflow: auto`	别忘了这句，不然你根本看不到内容

📚 相关文档（来自 MDN 官方）

如果你觉得这篇文章对你有帮助，欢迎转发分享给你的前端小伙伴。别再让 Flex 布局把你"撑爆"啦 😅

Flex 布局中容易踩的那些坑，你踩过几个？