用flex-grow撑开子元素需先设父容器display: flex，再根据方向设flex-direction，子元素设flex-grow分配剩余空间，同时排除固定宽高、white-space等干扰。
子元素宽度没撑开容器，通常是因为默认的文档流布局不会自动拉伸填满父容器。用 flex-grow 配合 Flex 布局，是最直接、可控的解决方式。
确保父容器是 flex 容器
只给子元素设 flex-grow 没用，必须先让父容器启用 Flex 布局：
- 给父元素设置
display: flex - 如果希望子元素横向铺满，保持默认的
flex-direction: row - 若需纵向铺满（比如高度撑开），加
flex-direction: column并确保父容器有明确高度
用 flex-grow 让子元素自动占满剩余空间
flex-grow 控制子元素在主轴方向上“能放大多少”。值为 1 表示等比分配剩余空间：
- 单个子元素：设
flex-grow: 1，它会独占全部剩余宽度（或高度） - 多个子元素：都设
flex-grow: 1，它们均分剩余空间；设2和1，则按 2:1 分配 - 注意：
flex-grow不影响已有内容宽度，只作用于“剩余空间”
避免常见干扰项
即使用了 flex，也可能因其他样式导致撑不开：
- 检查子元素是否有固定宽高（如
width: 200px或flex: 0 0 auto），会压制flex-grow - 确认没有
white-space: nowrap+ 内容超长导致父容器被撑宽，反而看起来“没填满” - 父容器若设置了
flex-wrap: wrap，且子元素总宽超过一行，flex-grow只在当前行内生效
基本上就这些。flex-grow 不复杂但容易忽略前提条件——父元素得是 flex 容器，且子元素没被其他规则锁死尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
