嘿，我完全懂你遇到的这个坑——用flex的row布局做双列卡片列表时，容器一个劲往横向延伸，根本不会自动换行，对吧？我之前做电商产品卡片列表的时候也踩过一模一样的坑，给你分享两个靠谱的解决思路：

方案1：修正Flexbox配置 #

问题出在flex布局的默认行为上：flex-wrap属性默认是nowrap，所以所有卡片都会强行挤在一行，导致容器横向溢出。只要调整几个属性就能搞定：

/* 容器样式 */
.card-container {
  display: flex;
  flex-wrap: wrap; /* 关键！让卡片超出宽度时自动换行 */
  gap: 1rem; /* 卡片之间的间距，比用margin更方便 */
  padding: 1rem;
}

/* 卡片样式 */
.card {
  flex-basis: calc(50% - 0.5rem); /* 双列布局，减去gap的一半避免换行 */
  flex-grow: 0; /* 禁止卡片拉伸，保持固定宽度 */
  flex-shrink: 0; /* 禁止卡片收缩 */
  /* 或者更简洁的写法：flex: 0 0 calc(50% - 0.5rem); */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

这里的flex-basis: calc(50% - 0.5rem)是因为我们设置了gap:1rem，每个卡片左右各占0.5rem的间距，这样计算后刚好填满容器宽度，不会出现第三列或者多余空隙。

方案2：用CSS Grid实现（更推荐） #

如果你的需求就是规整的双列网格，CSS Grid其实是更合适的选择，代码更简洁，也不用费心计算宽度：

/* 容器样式 */
.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 直接指定2列，每列宽度均分 */
  gap: 1rem;
  padding: 1rem;
}

/* 卡片样式 */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

repeat(2, 1fr)的意思是创建2列，每列占用相等的可用空间，Grid会自动处理换行和宽度分配，省心很多。

额外优化：响应式适配 #

如果需要在小屏幕上自动改成单列，加个媒体查询就行：

@media (max-width: 768px) {
  /* Flex方案适配 */
  .card-container.flex {
    flex-wrap: wrap;
  }
  .card-container.flex .card {
    flex-basis: 100%;
  }

  /* Grid方案适配 */
  .card-container.grid {
    grid-template-columns: 1fr;
  }
}

这两种方法我都在实际项目中用过，Grid适合规整的网格场景，Flexbox则在需要更灵活的对齐或者混合布局时更有用，看你的具体需求选就行～

内容的提问来源于stack exchange，提问作者Aucesi