flex: 1 填充的是父容器主轴方向上其他兄弟元素占位后的剩余空间；需父容器设 display: flex 和明确尺寸，且推荐写为 flex: 1 1 0% 以避免内容撑开初始大小。
flex: 1 到底填的是谁的“剩余空间”
它填的是父容器的 flex-direction 主轴方向上、其他兄弟元素占位后剩下的可用空间，不是“屏幕高度”或“父容器全部尺寸”。很多人以为设了 flex: 1 就能撑满整个视口，结果发现没反应——八成是父容器没设 display: flex，或者主轴方向和预期不一致。
实操建议：
- 确保父容器有明确的
display: flex和height（比如height: 100vh），否则子项无“剩余”可填 - 横向布局（
flex-direction: row）时，flex: 1填宽度；纵向（flex-direction: column）时填高度 - 如果父容器高度依赖内容，
flex: 1可能完全不生效——这时得先 fix 父容器高度
flex: 1 是 shorthand，但别漏掉 flex-basis: 0%
flex: 1 展开其实是 flex: 1 1 0%，其中 0% 是关键。它让元素初始大小为 0，再按比例分配剩余空间。如果写成 flex: 1 1 auto 或直接省略第三项（旧写法兼容问题），就可能因内容撑开初始尺寸，导致填不满。
常见错误现象：
- 文字多的项占宽远超预期，另一项被严重压缩
- 两个
flex: 1兄弟元素宽度不均等 - 加了
padding或border后溢出容器
解决方法：显式写 flex: 1 1 0%，或统一用 flex: 1（现代浏览器都支持，且语义清晰）
多个 flex: 1 兄弟共存时的权重逻辑
所有设了 flex: 1 的子项默认等分剩余空间，但只要改第一个参数（放大系数），权重就变了。比如 flex: 2 占比是 flex: 1 的两倍。
使用场景：
- 侧边栏 + 主内容区：侧边栏
flex: 0 0 240px（固定宽），主区flex: 1 - 三栏等宽：
flex: 1三个都写，无需计算百分比 - 主次分明的卡片流：
flex: 3的主卡 +flex: 1的副卡
注意：flex-grow（第一个值）只在有剩余空间时起作用；一旦内容溢出或容器太小，flex-shrink（第二个值）才介入压缩
flex: 1 在移动端或嵌套 Flex 容器里的坑
嵌套 Flex 时，内层 flex: 1 的“剩余空间”只来自它的直接父容器，和外层无关。容易误判层级，导致填不满。
典型问题：
- Tab 页面中，底部 TabBar 固定高，上面内容区设
flex: 1，但没生效 → 检查是否漏了中间容器的flex-direction: column - iOS Safari 下，输入框聚焦后页面缩放，
flex: 1区域高度异常 → 加min-height: 0防止 flex 项继承父容器最小高度 - 使用
height: 100%替代flex: 1→ 不推荐，百分比高度在 Flex 子项中行为不可靠
真正需要填满剩余空间的时候，flex: 1 是最直接的解法，但它的前提非常具体：父容器必须是 Flex 容器、主轴方向明确、高度/宽度有约束。缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
