flex-grow 按比例分配剩余空间，需配合 flex-basis: 0 才能实现精确比例；正确写法用 flex: grow shrink basis，如 flex: 2 1 0；注意 min/max-width 限制及调试时启用 Flexbox overlay 查看效果。
在 HTML5 中，flex-grow 是 Flex 布局中控制子元素“自动放大”的核心属性，它决定子元素在容器有剩余空间时，按比例分配额外空间的能力。
flex-grow 的基本原理
flex-grow 是一个无单位的数值（默认为 0），表示该子元素“愿意”占据多少份剩余空间。它不直接设置像素宽度，而是参与比例计算：所有子元素的 flex-grow 值相加为总份数，每个子元素按自身值占总份数的比例分得剩余空间。
- 值为 0：不放大，保持自身内容宽度（或
flex-basis指定的初始大小） - 值为 1：参与等分剩余空间（多个值为 1 的元素平均分配）
- 值为 2：获得的额外空间是
flex-grow: 1元素的两倍
关键前提：确保父容器是 Flex 容器
必须给父元素设置 display: flex 或 display: inline-flex，否则 flex-grow 不生效。
示例：
立即学习“前端免费学习笔记（深入）”；
配合 flex-basis 和 flex-shrink 更精准控制
flex-grow 单独使用时，实际放大起点由 flex-basis 决定（默认为 auto，即内容宽度）。建议显式设置 flex-basis 避免意外行为：
- flex: 1; 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;（推荐用于均分容器）
- flex: 2 1 auto; 表示放大权重为 2、可收缩、初始大小为内容宽
- 若希望按比例放大且忽略原始宽度，设
flex-basis: 0，这样空间分配完全由flex-grow比例决定
常见实用场景写法
✅ 左右两栏布局，右侧自适应放大：
.container { display: flex; }.left { width: 200px; }
.right { flex-grow: 1; }
✅ 三栏等宽（忽略内容原始宽度）：
.item { flex: 1; } /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0 */✅ 主内容区放大，侧边栏固定：
.main { flex-grow: 2; }.aside { width: 300px; }
