flex-grow决定剩余空间分配比例，flex-basis定义初始占位尺寸（优先级高于width），flex-shrink控制溢出时的加权收缩；三者协同工作，缺一不可。
Flex 布局中，项目分配剩余空白空间主要靠三个属性协同作用：flex-grow、flex-basis 和 flex-shrink，其中 flex-grow 是决定“谁分多少”的核心。
flex-grow 控制份额分配
它是一个无单位的数值，表示该项目在主轴剩余空间中“能拿几份”。所有参与分配的子项，按各自的 flex-grow 值比例瓜分剩余空间。
- 若某子项 flex-grow: 0（或未设置），它不参与伸展，只占自身 flex-basis 定义的基础尺寸
- flex-grow: 2 的项目拿到的空间是 flex-grow: 1 项目的两倍
- 所有子项 flex-grow 都为 0 → 剩余空间保留，不分配给任何项目
flex-basis 是分配前的起点
它相当于项目的“初始宽度/高度”，是计算剩余空间的基准。可以是具体值（如 100px）、百分比（50%）或关键字（auto、content）。
- 设为 auto：以元素自身内容宽高或 width/height 为准
- 设为 content：严格按内容撑开，不参考 width
- 剩余空间 = 容器主轴尺寸 − 所有子项 flex-basis 之和
justify-content 管理未被 flex-grow 吃掉的“整体空隙”
当所有子项都不伸展（flex-grow: 0），或伸展后仍有剩余空间时，justify-content 决定这些“整体空隙”怎么摆：
- flex-start：全部空隙堆在末尾（默认）
- center：空隙均分到两端
- space-between：空隙只分在项目之间，首尾贴边
- space-around：每个项目两侧空隙相等（首尾空隙是中间的一半）
- space-evenly：所有间隙（含首尾）完全相等
margin: auto 是另一种“抢空间”方式
它不依赖 flex-grow，而是直接“吸走”主轴或交叉轴上的弹性剩余空间：
- 单个子项设 margin: auto → 水平 + 垂直同时居中
- 只设 margin-left: auto → 吸走左侧所有空白，推到最右
- 只设 margin-top: auto → 吸走上方空白，沉到底部（需父容器 align-items 不是 stretch，且子项高度固定或明确）
