<p>使用Flexbox实现多行多列均匀间距布局，推荐现代gap属性或兼容的margin负边距技巧。1. 支持gap时：容器设display: flex、flex-wrap: wrap和gap，子项宽度用calc(百分比 - gap)；2. 不支持gap时：容器设负margin抵消子项margin，子项通过margin设置间距并用calc调整宽度；3. 响应式可通过媒体查询动态调整子项flex比例与gap一致性，实现不同设备下的多列布局。</p>
使用 CSS 的 Flexbox 实现多行多列并带有均匀间距（类似 gap 效果），虽然传统 Flexbox 不直接支持 gap 属性（直到最近才在部分浏览器中支持），但可以通过组合 flex-wrap 和一些技巧来实现类似效果。
1. 使用现代 gap 支持（推荐）
现代浏览器已支持在 Flex 容器上使用 gap 属性，这是最简单的方式。
.container {
display: flex;
flex-wrap: wrap;
gap: 16px; /* 行与列之间的间距 */
}
.item {
flex: 0 0 calc(33.333% - 16px); /* 每行三列，减去横向间距影响 */
}<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>
说明：
-
gap自动处理行和列的间距，无需额外 margin。 - 子项宽度要减去
gap带来的空间占用（如三列布局：33.333% - gap）。
2. 兼容旧浏览器：用 margin 模拟 gap
如果需要兼容不支持 gap 的浏览器，可以用 margin 配合负边距来实现。
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-wrap: wrap;
margin: -8px; /* 负边距抵消子项的外边距 */
}
.item {
flex: 0 0 calc(33.333% - 16px);
margin: 8px; /* 上下左右都有间距 */
}原理：
- 给容器设置负 margin，抵消子元素的多余外边距。
- 子项用 margin 控制间距，
calc()确保总宽度不超过 100%。
3. 动态列数响应式布局示例
结合媒体查询实现不同屏幕下的列数变化，同时保持间距一致。
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
.item {
flex: 1 1 calc(33.333% - 16px);
}
/* 平板：两列 */
@media (max-width: 768px) {
.item {
flex: 1 1 calc(50% - 16px);
}
}
/* 手机：单列 */
@media (max-width: 480px) {
.item {
flex: 1 1 100%;
}
}优势：
- 使用
flex: 1 1 <width>让项目可伸缩。 -
gap保持统一视觉节奏。
基本上就这些。只要合理使用 flex-wrap、gap 或 margin 技巧，就能轻松实现多行多列的均匀布局。
