使用 justify-content 的 space-evenly 实现子元素平均分布，结合 gap 控制间距，或设置 flex: 1 使子元素等宽占满容器，灵活应对不同布局需求。
在使用 Flex 布局时，让子元素平均分布是常见的布局需求，比如导航栏、按钮组或卡片列表。通过合理设置容器的对齐属性和间距控制，可以轻松实现这一效果。
使用 justify-content 实现主轴平均分布
Flex 容器的 justify-content 属性用于控制子元素在主轴（默认为水平方向）上的对齐方式。要实现子元素的平均分布，可选用以下值：
- space-between：两端元素贴边，中间间距相等
- space-around：每个元素周围有相等空间，视觉间距不完全均等
- space-evenly：所有元素之间的间距完全相等，包括与容器边缘的距离
例如，希望四个按钮在容器中均匀分布，使用 space-evenly 可以最直观地达到“平均”效果：
display: flex; justify-content: space-evenly;
结合 gap 属性控制精确间距
虽然 space-between 等属性能自动分配空间，但若需要固定间距（如 16px），推荐使用 gap 配合均匀排列。
将 justify-content 设为 flex-start 或 center，再配合 gap，可实现更可控的布局：
display: flex; justify-content: flex-start; gap: 16px;
此时所有子元素之间保持 16px 间距，边缘与容器之间无额外留白，适合内边距已设定的场景。
子元素等宽平均占满容器
若希望每个子元素宽度相同并填满父容器，可通过以下方式实现：
- 设置子元素 flex: 1，使其平分可用空间
- 或统一设置 flex: 0 0 25%（4个等分）等比例划分
例如创建四等分布局：
.container {
display: flex;
}
.item {
flex: 1; /* 每个子元素等宽 */
}这样即使内容不同，每个项目也会占据相同宽度，实现真正的“平均分布”。
基本上就这些方法，根据是否需要固定间距、是否等宽、边缘是否留白来选择合适组合。灵活运用 justify-content、gap 和 flex 属性，就能应对大多数平均分布场景。
