本文详解 Flexbox 卡片布局常见错误：多个独立容器导致换行、固定宽度限制响应性，以及如何用 flex-basis + 单容器结构实现灵活、可扩展的水平排列。
本文详解 flexbox 卡片布局常见错误：多个独立容器导致换行、固定宽度限制响应性，以及如何用 `flex-basis` + 单容器结构实现灵活、可扩展的水平排列。
在使用 Flexbox 构建响应式卡片布局时，一个高频误区是——将每张卡片包裹在独立的 .card-container 中。正如原始代码所示，两个 <div class="card-container"> 分别包裹一张卡片，这会导致浏览器将其渲染为两个独立的 flex 容器，每个容器内仅有一个子项，自然无法“并排”；它们会垂直堆叠（块级元素默认行为），与 <code>display: flex 的预期完全背离。
✅ 正确做法是：所有卡片必须位于同一个 flex 容器内。只需一个 .card-container，内部直接放置多个 .card 元素：
<div class="card-container"> <div class="card">/* 卡片1 */</div> <div class="card">/* 卡片2 */</div> <!-- 更多卡片... --> </div>
同时，应避免对 .card 设置绝对宽度（如 width: 325px），因为它会强制占据固定空间，在不同屏幕下易导致溢出或间隙失控。推荐改用 flex-basis 配合 flex-grow/flex-shrink，让卡片在容器中智能分配空间。例如：
.card {
flex-basis: calc(50% - 20px); /* 每行最多2张，预留 margin 空间 */
flex-grow: 0;
flex-shrink: 1;
margin: 10px;
/* 其他样式保持不变 */
}这样，在桌面端自动两列排列；若需适配移动端（如单列），可结合媒体查询：
@media (max-width: 768px) {
.card {
flex-basis: 100%;
}
}⚠️ 注意事项：
- 图片尺寸过大本身不是主因，但未约束
max-width可能撑破卡片。建议为.card img添加max-width: 100%（当前width: 100%已足够）； - 移除冗余的
flex-wrap: wrap（除非卡片数量超出行宽需折行），本例中单行两卡无需换行； - 原始代码中重复定义
.card-container会破坏 flex 布局逻辑，务必合并为单一容器。
总结：Flexbox 的核心在于「一个容器，多个弹性子项」。通过语义化 HTML 结构 + flex-basis 替代 width + 合理间距控制，即可轻松实现健壮、响应式的卡片并排布局。
