flex: 1 1 0% 适合严格等分剩余空间的场景，它使所有子项初始主轴尺寸为0%，无视内容宽度，完全按flex-grow系数均分容器剩余空间；而flex: 1 1 auto则先按内容或显式宽占位再分配剩余空间，更尊重内容自然尺寸。
flex: 1 1 0% 适合严格等分剩余空间的场景
当你明确要求所有项目无视自身内容尺寸、完全均分父容器剩余宽度（或高度）时，flex: 1 1 0% 是最直接的选择。它的 flex-basis: 0% 把所有项目的“起点”归零，后续分配只看 flex-grow 系数。
- 常见于栅格系统中多个空白占位区块，比如后台仪表盘的卡片容器：
.card-grid { display: flex; }+ 每个.card { flex: 1 1 0%; } - 表单中多个输入框并排且必须严格等宽（如日期范围选择器的“开始/结束”两个
input），内容长度差异大但视觉需对齐 - 轮播图容器内多个
div占位，不依赖内容、只靠 flex 分配空间
注意：如果某个项目内容超长（比如一段未换行的 URL），flex: 1 1 0% 不会保底——它真从 0 开始拉伸，文字可能被强制压缩或溢出，需额外加 min-width 或 overflow 控制。
flex: 1 1 auto 更适合尊重内容、兼顾伸缩的场景
flex: 1 1 auto 的 flex-basis: auto 会让每个项目先按自身内容宽度（或显式 width）占位，再把剩余空间按 flex-grow 比例分出去。这不是“均分”，而是“有基础地再分配”。
- 导航栏菜单项：
.nav-item { flex: 1 1 auto; }—— “首页”“关于我们”“联系我们”文字长度不同，但希望它们撑满容器又不挤掉图标或文字 - 带图标+文字的按钮组，图标固定宽、文字可变长，用
flex: 1 1 auto能让文字区域自然伸缩，而非强行切分 - 响应式表单项，label 和 input 并排，label 宽度由文字决定，input 占剩余空间但至少能显示完整输入框
容易踩的坑：如果父容器太窄，flex: 1 1 auto 仍可能溢出——这不是属性错了，而是没设 flex-wrap: wrap 或没限制子项最小宽度，得配合 min-width: 0 或 overflow: hidden 一起用。
为什么不能只写 flex: 1 就完事？
flex: 1 是 flex: 1 1 0% 的简写，不是 flex: 1 1 auto。很多开发者误以为 flex: 1 是“智能伸缩”，结果在导航栏里一用就发现短文字项被拉得过大、长文字项反而被压扁。
- 检查你写的
flex: 1是否真需要“归零起步”，还是其实想保留内容宽度 - 浏览器 DevTools 里看 computed styles，确认
flex-basis是0%还是auto，比猜更可靠 - 想快速切换效果？把
flex: 1改成flex: auto，或显式写成flex: 1 1 auto，别依赖简写歧义
真正麻烦的不是语法记不住，而是布局出问题时，你得意识到：不是 flex 没生效，而是 flex-basis 的初始值悄悄决定了整个分配逻辑的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
