使用 Flexbox 实现等间距排列需设置 display: flex 配合 justify-content 或 gap。1. 水平排列可用 space-between（首尾贴边）、space-around（周围空间相等）或 space-evenly（完全等距）。2. 使用 gap 属性可精确控制子项间距，避免 margin 问题，支持 row-gap、column-gap 简写。3. 等宽等间距布局可结合 flex: 1 与 gap，使子项均分容器空间，适用于响应式设计。4. 多行布局通过 flex-wrap: wrap 配合 gap 实现自动换行和二维等距排列。整体方案简洁兼容，适合各类等距需求。
使用 CSS Flexbox 实现等间距排列非常方便，关键在于合理设置容器的 display、justify-content 和 gap 属性。下面介绍几种常见场景和实现方式。
1. 基础等间距水平排列
让子元素在一行中等距分布，可以使用 justify-content: space-between 或 space-around。
• space-between：首尾元素贴边，中间间距相等。• space-around：每个元素周围分配相等空间，视觉间距稍不均。
• space-evenly：所有元素之间的间距完全相等，包括到边缘的距离。
示例代码：
.container {
display: flex;
justify-content: space-evenly; /* 或 space-between / space-around */
}
2. 使用 gap 精确控制间距
如果希望间距完全一致且可精确控制（比如 20px），推荐使用 gap 属性。它比 margin 更简洁，不会出现外边距合并问题。
立即学习“前端免费学习笔记（深入）”；
注意：gap 支持横向（row-gap）和纵向（column-gap），也可简写为 gap。
示例代码：
.container {
display: flex;
gap: 20px; /* 所有子项之间间距 20px */
}
这种方式下，无需额外设置 margin，布局更干净。
3. 等宽等间距排列（响应式适用）
若希望每个子项宽度相同，并均匀分布在容器中，可结合 flex: 1 与 gap。
示例：
.container {
display: flex;
gap: 16px;
}
.item {
flex: 1; / 每个子项平分剩余空间 /
}
这样即使容器宽度变化，子项仍保持等宽等距，适合栅格类布局。
4. 多行等间距排列
对于换行的 Flex 容器，使用 flex-wrap: wrap 配合 gap 可实现二维等距布局。
示例：
.container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
每行子项自动换行，横向和纵向间距均由 gap 控制，无需计算百分比或使用浮动。
基本上就这些。使用 Flexbox 结合 justify-content 和 gap，就能灵活实现各种等间距需求，代码简洁且兼容性良好。
