justify-content实现主轴均匀分布需区分场景：space-between使首尾贴边、中间等距，适用于导航栏；space-evenly则让元素间及元素与边缘间距完全相等，真正均匀，适合卡片或图标组；二者均需父容器设display: flex且flex-direction明确主轴方向。
主轴均匀分布靠 justify-content，但“均匀”有不同理解，得看你要的是“元素间等距”还是“元素与边缘也等距”。
space-between：首尾贴边，中间等距
适合导航栏、按钮组这类需要撑满容器且首尾对齐边缘的场景。它把所有空白平均分给元素之间的间隙，首项紧贴左（或上）边缘，末项紧贴右（或下）边缘。
- 主轴为 row 时：左右两端无空隙，中间间隙相等
- 主轴为 column 时：上下两端无空隙，中间垂直间隙相等
- 注意：只有 2 个及以上子元素时效果才明显；单个元素会贴在起点
space-evenly：所有间距完全一致
这是真正意义上的“均匀”——元素之间、元素与容器边缘的间距全部相等。视觉节奏更平衡，适合卡片标签、功能图标组等强调均质感的布局。
- 无论几个子元素，左右（或上下）留白和中间留白数值相同
- 比 space-around 更易预测，不需要心算“两侧是中间一半”
- 兼容性良好（Chrome 63+、Firefox 52+、Safari 11+、Edge 16+）
别忘了主轴方向这个前提
justify-content 只作用于主轴，而主轴由 flex-direction 决定：
- flex-direction: row（默认）→ 主轴水平 → justify-content 控制左右对齐
- flex-direction: column → 主轴垂直 → justify-content 控制上下对齐
比如想让一列文字在容器里垂直方向均匀拉开，就得设 flex-direction: column，再配 justify-content: space-evenly。
小提醒：父容器必须是 Flex 上下文
这些值只在设置了 display: flex 或 display: inline-flex 的容器上生效。如果忘了这一步，样式完全不会起作用。
- 检查是否漏写
display: flex - 确认子元素是直接子级（justify-content 不作用于孙子元素）
- 若子元素总宽/高超出主轴空间，考虑加
flex-wrap: wrap避免溢出干扰对齐效果
