flex-grow: 1不拉宽的根本原因是父容器无剩余空间；需确保父容器有明确宽度、子元素无固定width/min-width干扰，且flex-basis设为0才能触发按比例分配。
因为 Flex 子元素默认不继承父容器宽度，且 flex-basis: auto 优先级高于 width，它先按内容尺寸占位，再分配剩余空间——没剩余，就根本“填不满”。
flex-grow: 1 为什么有时还是不拉宽？
不是 flex-grow 失效，而是它只分“剩余空间”。如果父容器没设宽度、子元素自身有固定 width 或 min-width、或者多个子项都设了 flex-grow: 0，那剩余空间就是 0。
- 父容器必须有明确宽度（比如
width: 100%或固定值），否则 flex 容器自己先收缩，子项无空间可分 -
flex-grow: 1和width: 200px同时写，width被忽略——因为flex-basis默认是auto，取的就是内容宽，而flex: 1等价于flex-basis: 0，直接清空初始尺寸 - 多个子项都设
flex-grow: 0，它们就卡在内容宽或width值上，彼此之间看起来“不均”，其实是都没参与伸缩
想让 width 生效，就得绕过 flex 的默认伸缩逻辑
Flex 容器对子项的默认处理是 flex: 0 1 auto，其中 flex-shrink: 1 允许压缩，flex-basis: auto 覆盖你写的 width。要让它听话，得显式切断这个链条。
- 写死
flex: 0 0 200px（不增长、不收缩、基础宽 200px） - 或分开写：
flex-shrink: 0+flex-basis: 200px（注意不能只写width: 200px） - 百分比宽度要生效，父容器必须有明确宽度参照，否则
flex-basis: 30%无意义
align-items: stretch 不管用？方向搞反了
很多人调 align-items 想让子元素“撑满宽度”，结果没效果——因为 align-items 控制的是侧轴（cross axis），不是主轴（main axis）。flex-direction: row 时，侧轴是垂直方向；column 时，侧轴才是水平方向。
- 想让子元素在水平方向填满，该调主轴行为：
flex-grow或flex: 1 -
align-items: stretch在row布局下控制的是子项高度，不是宽度；它默认就生效，不用额外加，但会被height、min-height或align-self覆盖 - 绝对定位的子元素完全脱离 flex 流，
align-items对它无效
真正容易被忽略的点：flex 布局里没有“默认填满”这回事，所有伸缩都是基于剩余空间计算的。父容器宽度缺失、子元素隐式最小限制、甚至 min-width: auto 在某些浏览器下的表现，都会让 flex-grow 变成摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
