flex: 1等分失效的常见原因有三：父容器未设display: flex；子项存在width或min-width冲突；内容不可压缩触发min-width: auto。需配min-width: 0、明确height及区分flex: 1与flex: auto。
flex: 1 等分失效的常见原因
直接写 flex: 1 却没等分？大概率不是语法错，而是父容器或子项本身卡住了 Flex 计算链。最常踩的三个坑是：
• 父容器没设 display: flex 或 display: inline-flex，flex 属性压根不生效
• 子项自带 width（比如 width: 200px 或 width: 100%），和 flex-basis 冲突，浏览器优先按 width 渲染
• 子项内容不可压缩（长 URL、英文单词、inline-block 元素），触发默认 min-width: auto，导致 flex: 1 被“撑爆”
横向三等分必须配 min-width: 0
三等分按钮/卡片时，即使写了 flex: 1，窄屏下仍可能换行或溢出——问题就出在子项默认不允许压缩到内容宽度以下。
解决方法很简单：给每个子项加 min-width: 0。
如果还要截断文字，记得同步加：
• white-space: nowrap
• overflow: hidden
• text-overflow: ellipsis
flex: 1 和 flex: auto 的实际差异
这两个值看着像，但行为完全不同：
• flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%：无视内容宽，从 0 开始均分空间，适合卡片、按钮等严格等宽场景
• flex: auto 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: auto：先按文字/图片等内容占位，再分剩余空间，容易让长文本项变宽，破坏等分
别混用。要等分，就统一用 flex: 1；要保留内容宽度再分配，才考虑 flex: auto
垂直等分高度时父容器必须有明确 height
想让三个 <p> 均分屏幕高度？光靠 flex: 1 不够。
Flex 不会凭空“猜”高度，父容器必须有可计算的高度值：
• 写死 height: 500px
• 或继承自 html, body { height: 100% }，再设父容器 height: 100%
• 或用 height: 100vh（注意 iOS Safari 对 vh 的兼容性）
漏掉这步，flex-direction: column 下的 flex: 1 就只是“尽可能高”，而不是“均分”
立即学习“前端免费学习笔记（深入）”；
