正确设置flex-grow和flex-basis是实现子元素宽度比例控制的关键。默认情况下子元素不会自动扩展，需通过flex属性显式配置：flex-grow定义剩余空间分配权重，flex-basis设定初始主轴尺寸。推荐使用flex简写（如flex:1、flex:2）使子项按比例分配容器宽度，当设置不同基础宽度时（如flex:1 1 100px与flex:2 1 150px），子元素在保留最小宽度的同时按权重伸展，从而精准控制布局。
在使用 CSS Flex 布局时，如果子元素的宽度比例不符合预期，通常是因为没有正确设置 flex-grow 和 flex-basis。默认情况下，flex 容器中的子项不会按比例分配剩余空间，需要显式配置才能实现理想的宽度分布。
理解 flex-grow 与 flex-basis 的作用
flex-grow 控制子元素如何分配容器中剩余的空间。值越大，占据的剩余空间越多。默认值为 0，表示不扩展。
flex-basis 定义子元素在分配多余空间之前的初始主轴尺寸（类似于设置 width）。可以是具体像素值（如 200px）或百分比（如 50%），也可设为 auto。
当两者结合使用时，能精准控制子元素的宽度比例。
立即学习“前端免费学习笔记（深入）”；
通过 flex 属性设置比例分配
推荐直接使用 flex 简写属性来同时设置 flex-grow、flex-shrink 和 flex-basis，避免遗漏。
例如，让两个子元素按 1:2 的比例分配宽度：
- 父容器设置 display: flex
- 第一个子元素设置 flex: 1
- 第二个子元素设置 flex: 2
此时，每个子项的 flex-basis 默认为 0，flex-grow 分别为 1 和 2，它们将根据比例瓜分容器全部宽度。
指定基础宽度后再按比例扩展
若希望子元素有一个最小宽度（如 100px），再按比例分配剩余空间，应明确设置 flex-basis。
比如：- 子元素 A：flex: 1 1 100px → 初始宽 100px，后续按比例增长
- 子元素 B：flex: 2 1 150px → 初始宽 150px，增长权重是 A 的两倍
这样即使初始宽度不同，也能在剩余空间中按设定比例伸展。
基本上就这些。关键是把 flex-basis 设准，再用 flex-grow 定义扩展权重，就能实现精确的宽度比例控制。不复杂但容易忽略细节。
