Flex 布局中容易踩的那些坑，你踩过几个？
zhenglin
2026年1月6日 14:45
本文热度 357
Flex 布局中容易踩的那些坑，你踩过几个？
在日常开发中，Flex 布局几乎是写页面绕不过去的一道坎。它强大、灵活，看起来也“简单易用”，但一旦涉及复杂嵌套和内容溢出。
很多同学就懵了，明明写了 flex: 1，为什么内容却把整个布局撑爆了？又或者明明设置了 flex-basis: 0%，但布局偏偏不听话？
今天这篇文章，我们就来聊聊 Flex 布局中几个非常容易踩坑但极具实用价值的知识点 ，希望大家看完后都能成为真·Flex高手 💪
🌱 基础热身：Flex 布局是个啥？ Flex（全称 Flexible Box）是一种 CSS3 的布局模式，最适合处理“一维方向”的布局，比如横向菜单、纵向分栏、左右结构自适应等。
使用起来也很简单，核心就两步：
.parent {
display: flex; /* 开启 Flex 布局 */
flex-direction: row; /* 主轴方向，row 是默认横向 */
}
然后子元素可以设置：
.child {
flex: 1;
}
这表示“尽可能占用剩余空间”。
看到这里你可能会觉得：so easy！但别急，坑还在后面等你……
🧩 flex 缩写属性到底包含了什么？ 我们经常看到这样的写法：
其实这是一个缩写，相当于：
代码高亮：javascript html css csharp sql
.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: 1 1 0 更明确，不容易出错，建议全团队都统一用这个写法 ✅。
🧨 flex 子元素为什么有时被撑爆了？
这个问题是 Flex 布局里最常见、也最容易让人抓狂的坑之一 。
比如你写了一个三段式页面布局：
<div class="app">
<div class="header">Header</div>
<div class="content">内容很多很多很多很多...</div>
<div class="footer">Footer</div>
</div>
.app {
display: flex;
flex-direction: column;
height: 100vh;
}
.header, .footer {
flex: 0 0 60px;
}
.content {
flex: 1 1 0;
}
你以为 .content .content.footer
min-height: auto（或 min-width: auto）子项至少要包住自己的内容 。
这就导致了我们设置的 flex-shrink: 1
🛠 解决方案：加上 min-height: 0！ 只需要一行代码，立刻解决问题：
.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 崩坏的罪魁祸首！
总结一下本文几个关键知识点：
参考文章：原文链接
400 186 1886
