本文详解如何通过正确设置 flexbox 容器、子项宽度与 html 结构，构建稳定且自适应的 2×2 卡片网格布局，重点解决因结构嵌套不当和固定百分比宽度导致的换行失效问题。

本文详解如何通过正确设置 flexbox 容器、子项宽度与 html 结构，构建稳定且自适应的 2×2 卡片网格布局，重点解决因结构嵌套不当和固定百分比宽度导致的换行失效问题。

在使用 Flexbox 构建多列网格（如常见的 2×2 服务卡片布局）时，许多开发者会遇到“明明写了 flex-wrap: wrap，却始终无法折成两行”的问题。根本原因通常不在 Flex 属性本身，而在于容器结构设计不合理与子项宽度计算失效。

? 核心问题剖析

原代码中，所有

被包裹在独立的

中，且这些

全部作为 #structure 的直接子元素——这看似合理，但实际导致了两个关键缺陷：

1. Flex 容器作用对象错误：CSS 选择器 #structure div 将每个
   设为 flex 容器，而非将 #structure 本身设为统一容器。结果是：4 个独立的单子项 flex 容器，彼此无布局关联，根本无法形成网格。
2. 宽度单位不兼容流式布局：.service-box { width: 40% } 在含左右 5% margin 的情况下，单个卡片实际占用约 40% + 5% + 5% = 50% 水平空间，理论上可容两列。但因父容器未设宽度约束、margin 叠加计算误差及浏览器渲染差异，极易触发意外换行或溢出。

✅ 正确实现方案

1. 重构 HTML 结构

将全部 4 张卡片置于同一个 flex 容器内，并确保其直接子元素为卡片容器（即

），避免多余层级：

<section class="structure">
  <div>
    <article class="service-box">…</article>
  </div>
  <div>
    <article class="service-box">…</article>
  </div>
  <div>
    <article class="service-box">…</article>
  </div>
  <div>
    <article class="service-box">…</article>
  </div>
</section>

✅ 提示：也可直接让

成为 .structure 的子元素（省略

包裹），但保留

更利于后续添加悬停效果、过渡动画等扩展逻辑。

2. 精准控制卡片宽度与间距

改用视口单位 vw 替代 %，并预留安全边距：

.service-box {
  width: 40vw; /* 基于视口宽度，更可控 */
  max-width: 380px; /* 防止大屏下过宽 */
  margin: 20px 2.5vw; /* 左右 margin 同样用 vw，保持比例 */
  flex: 0 0 auto; /* 关键！禁用 flex 伸缩，确保 width 严格生效 */
}

同时，为容器启用标准 flex 行列布局：

.structure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 居中对齐更美观 */
  gap: 20px; /* 推荐使用 gap 替代 margin 实现间隙（现代浏览器支持） */
  padding: 0 20px;
}

? gap 是 Flexbox（及 Grid）的现代化间隙方案，无需手动计算 margin，自动规避外边距合并问题，语义更清晰。

3. 完整可运行示例（含响应式优化）

<section class="structure">
  <div><article class="service-box">…</article></div>
  <div><article class="service-box">…</article></div>
  <div><article class="service-box">…</article></div>
  <div><article class="service-box">…</article></div>
</section>

.structure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 0 1rem;
}

.service-box {
  flex: 0 0 calc(50% - 2rem); /* 精确控制：两列，减去 gap 占位 */
  max-width: 420px;
  margin: 0;
  box-sizing: border-box;
}

/* 响应式断点：小屏转为单列 */
@media (max-width: 768px) {
  .service-box {
    flex-basis: 100%;
  }
}

⚠️ 注意事项与最佳实践

• 勿滥用 width: 40%：在含 margin 的场景下，40% + margin-left + margin-right > 50% 易导致单行仅容一列。优先使用 flex-basis 或 calc() 动态计算。
• 始终设置 box-sizing: border-box：确保 padding 和 border 不影响宽度计算（已在示例中全局启用）。
• 慎用 justify-content: space-between：当子项数量非 2 的整数倍时，首尾间距会异常放大；推荐 center + gap 组合。
• 检查 HTML 空格与换行：display: flex 下，
  间的空白符可能被渲染为文本节点，干扰布局——建议移除换行或设 font-size: 0 于容器（需重置子元素字号）。

  通过以上调整，你将获得一个语义清晰、响应灵敏、跨浏览器稳定的 2×2 Flexbox 卡片布局，真正发挥 Flexbox 的流式布局优势。