如何用 Flexbox 实现响应式 2×2 卡片布局

<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 替代 %，并预留安全边距：

芝士饼

芝士饼是一个一站式AI原生应用开发平台，简单几步即可完成应用的创建与发布。

下载

.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 的流式布局优势。