flex: 1 1 0%与flex: 1 1 auto的核心区别在于flex-basis：前者设为0%，无视内容尺寸、严格均分剩余空间；后者设为auto，先按内容或显式宽占位再分配剩余空间。
flex: 1 1 0% 和 flex: 1 1 auto 的核心区别，只在 flex-basis 值不同：一个是 0%，一个是 auto。这直接导致它们计算“起点宽度”的方式完全不同——前者无视内容，后者尊重内容。
为什么 flex: 1 不等于 “智能撑满”？
很多人写 flex: 1 是想让元素“填满剩余空间”，但实际它等价于 flex: 1 1 0%，意味着：
– 所有项目初始主轴尺寸被强制设为 0%（即 0）
– 剩余空间按 flex-grow 系数均分，完全不看文字多长、图标多宽
– 如果你给一个按钮写了 width: 200px 又加 flex: 1，那个 200px 就被忽略
常见错误现象：
– 导航栏里“首页”和“关于我们”被拉成一样宽，结果“首页”两侧大片留白，“关于我们”文字被硬挤换行
– 表单中两个 input 并排，一个 placeholder 是“开始日期”，另一个是“结束日期”，视觉上却不对齐
flex: 1 1 auto 更适合有内容的场景
flex-basis: auto 会让浏览器先读取元素自身的 width、min-width 或内容固有尺寸，以此为基准，再把剩余空间按比例分配出去。这不是“均分”，而是“有底子地再伸缩”。
典型使用场景：
– 水平排列的带图标按钮：.btn-icon { flex: 1 1 auto; }，图标固定宽 + 文字可变长，文字区域自然延展
– 响应式表单：label 靠内容定宽，input 占剩余空间但至少显示完整框体
– 卡片列表中每个卡片含头像 + 昵称，希望昵称不被压缩，头像不被拉伸
容易踩的坑：
– 父容器没设 flex-wrap: wrap，且子项内容过长时仍会溢出（这不是 auto 的错，是布局约束本身）
– 忘记配合 min-width: 0，尤其在嵌套 flex 容器中，某些浏览器（如旧版 Safari）会对 min-width: auto 做特殊处理，导致收缩异常
什么时候必须用 0 而不是 0%？
flex: 1 1 0% 在父容器主轴尺寸未明（比如 width: auto 的 flex 容器）时，百分比无法计算，会悄悄回退为 auto，行为不可控。此时更稳妥的是显式写 0（无单位）：
– flex: 1 1 0 比 flex: 1 更明确，避免解析歧义
– 0 是绝对长度，不依赖父容器尺寸，浏览器一定从 0 开始分配
– 配合 min-width: 0 可进一步防止内容撑破容器（尤其含长 URL 或未换行文本时）
真正难的不是记住哪个是 0%、哪个是 auto，而是每次写之前问自己一句：这个元素的“最小可读宽度”由什么决定？是内容本身，还是我强行划出来的等分格子？答案决定了你该用哪个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
