如何使用CSS实现Flex均匀分布子元素_justify-content space-between实践
justify-content: space-between 用于在 Flexbox 主轴上均匀分布子元素，首尾元素分别对齐容器两端，中间间距相等。示例中通过 display: flex 和 justify-content: space-between 实现布局，适用于导航栏、按钮组等场景。注意事项包括至少两个子元素才能生效、避免内容拥挤及不使用 margin auto 干扰布局，若需边缘留白可选 space-around 或 gap。该方式适合非等宽但需拉伸填充的简洁布局。
简洁布局。在使用 Flexbox 布局时，justify-content: space-between 是一种常见的对齐方式，用于在主轴上均匀分布子元素。它会让第一个子元素靠左（或靠前），最后一个子元素靠右（或靠后），其余子元素之间的间距相等。
基本语法与结构
要使用 space-between 实现子元素的均匀分布，需将父容器设置为 Flex 容器，并应用 justify-content: space-between。
示例代码：.container {
display: flex;
justify-content: space-between;
}
HTML 结构通常如下：
1
2
3
实际效果说明
当使用 space-between 时：
- 第一个子元素紧贴容器左侧
- 最后一个子元素紧贴容器右侧
- 中间的空白区域被平均分配到各子元素之间
例如有三个子元素，则它们之间有两个间隙，这两个间隙宽度相等，且撑满剩余空间。
常见应用场景
这种布局适合用于导航栏、按钮组、卡片列表等需要两端对齐的场景。
举个例子：页脚三列布局.footer {
display: flex;
justify-content: space-between;
padding: 20px;
}
.footer > div {
flex: 0 0 30%; /* 每个子项占约30%宽度 */
background: #f0f0f0;
padding: 10px;
}
即使子元素设置了固定或弹性宽度，只要总宽度未占满容器，space-between 仍会将多余空间均匀分配在它们之间。
注意事项
使用 space-between 时需要注意以下几点：
- 至少需要两个子元素才能看到间距效果
- 如果子元素过多或容器太窄，可能导致内容拥挤
- 子元素不应使用自动外边距（如 margin: auto）来对齐，以免干扰 space-between 的计算
- 若希望首尾元素与容器边缘保持一致间距，可考虑使用 justify-content: space-around 或 gap 配合 justify-content: flex-start
基本上就这些。合理使用 justify-content: space-between 能快速实现简洁美观的布局，特别适合需要拉伸填充但又不想使用等宽分配的场景。不复杂但容易忽略细节。
