使用flex-wrap、justify-content和gap属性可实现多行多列Flex卡片均匀布局，通过calc()计算卡片宽度并结合响应式设计，确保每行排列整齐且间距一致，避免最后一行错位。
要在CSS中实现多行多列的Flex卡片布局，并保持均匀间距，关键是合理使用flex-wrap、justify-content和align-content属性，同时避免最后一行出现错位。以下是具体实现方法。
1. 基础HTML结构
每个卡片放在一个容器内，结构清晰：
<div class="flex-container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> <div class="card">卡片5</div> <div class="card">卡片6</div> </div>
2. 使用Flex实现多行均匀布局
通过设置容器为display: flex并允许换行，结合合适的对齐方式，实现整齐排列：
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between; /* 水平方向均匀分布 */
align-content: flex-start; /* 多行时顶部对齐 */
gap: 16px; /* 推荐：直接设置间隙（现代浏览器） */
}
<p>.card {
flex: 0 1 calc(33.333% - 16px); /<em> 每行最多3个，减去间隙宽度 </em>/
height: 100px;
background-color: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: center;
}</p>说明：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap允许换行 -
gap: 16px统一设置卡片之间的横向和纵向间距（推荐现代方案） -
calc(33.333% - 16px)确保每行三个卡片，减去单侧margin或gap的影响 - 如果不用
gap，可用margin代替，但需注意最后一行对齐问题
3. 兼容性处理（不支持gap时）
若需兼容较老浏览器，可用margin模拟间隙：
.flex-container {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 0 1 33.333%;
margin-bottom: 16px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
}
通过左右padding分配间距，避免最后一行因margin导致宽度溢出。
4. 控制每行数量
调整flex-basis可控制每行显示数量：
- 每行2个：
calc(50% - 8px) - 每行4个：
calc(25% - 12px) - 响应式场景建议配合媒体查询动态调整
基本上就这些。使用gap最简单可靠，搭配flex-wrap和calc()能轻松实现多行多列的均匀卡片布局。
