主轴空间分配由flex-grow、flex-basis和flex-shrink协同控制，结合gap与min-width可实现灵活稳定的布局。
在使用 CSS Flexbox 布局时，主轴（main axis）的空间分配是控制子元素排列和尺寸的关键。合理利用相关属性，可以让布局更灵活、响应更自然。
理解主轴与 flex-grow
Flexbox 的主轴方向由 flex-direction 决定，默认为 row（水平从左到右）。主轴上的空间分配主要通过 flex-grow 属性实现。
flex-grow 定义了子元素在主轴上如何“拉伸”以填充剩余空间。默认值为 0，表示不扩展。
比如有三个 flex 项目：- 第一个设置 flex-grow: 1，会占据所有可用空间
- 第二个设置 flex-grow: 2，它将获得两倍于 grow 值为 1 的空间
- 第三个保持默认（0），则不会伸展，只保留自身内容所需宽度
空间按比例分配：如果有两个项目，一个 grow=1，另一个 grow=2，总份数是 3，前者得 1/3 可用空间，后者得 2/3。
立即学习“前端免费学习笔记（深入）”；
控制初始大小：flex-shrink 与 flex-basis
真正灵活的主轴分配需要结合 flex-basis（定义项目在分配多余空间前的初始主轴尺寸）和 flex-shrink（控制是否收缩）。
例如：
flex: 1 1 200px
等价于：
- flex-grow: 1 —— 可伸展
- flex-shrink: 1 —— 空间不足时可压缩
- flex-basis: 200px —— 初始主轴尺寸为 200px
当容器空间大于总初始尺寸时，剩余空间按 flex-grow 比例分配；若空间不足，则根据 flex-shrink 比例压缩。
避免意外压缩：min-width 的作用
有时即使设置了 flex-basis，项目仍可能被压缩得很小，影响内容显示。这是因为默认情况下文本或内联内容可能导致最小尺寸计算异常。
解决方法是显式设置 min-width: 0 或限制最小尺寸：
- 对包含长文本的 flex 项，添加 min-width: 0 允许其正常收缩
- 若希望保持最小宽度，可设 min-width: 100px 等具体值
这对嵌套结构或表格类布局特别有用。
使用 gap 分隔项目而不影响分配逻辑
传统做法用 margin 实现间隔，但这会影响主轴空间计算，导致 flex-grow 分配不均。现代浏览器支持 gap 属性，可在 flex 容器上直接设置间距：
display: flex;
gap: 16px;
gap 不参与 flex 计算，剩余空间在项目间按 grow 正常分配，同时保持视觉间隔清晰。
基本上就这些。掌握 flex-grow、flex-basis 和 flex-shrink 的配合，再辅以 gap 和 min-width 控制细节，就能精准控制主轴空间分配，构建出既弹性又稳定的布局。
