如何用Flexbox实现含固定卡片与双高Widget的响应式布局

方案一：CSS Grid（推荐） #

Grid布局天生适配这类跨行/跨列的布局需求，代码简洁直观，完全不需要JavaScript，也不会影响Widget内部的滚动功能。

修改后的CSS代码：

.container {
  margin: 50px 300px;
  display: grid;
  gap: 20px; /* 统一设置行列间距 */
  min-width: 320px; /* 2列布局触发宽度 */
  max-width: 490px; /* 3列布局触发宽度 */
  border: 3px solid rgb(0, 22, 117);
}

.card {
  width: 150px;
  height: 100px;
  background-color: bisque;
}

.widget {
  height: 220px; /* card height * 2 + row-gap */
  width: 150px;
  background-color: rgb(134, 204, 245);
  grid-row: span 2; /* 强制Widget占据2行高度 */
}

/* 2列布局规则 */
@media (min-width: 320px) and (max-width: 489px) {
  .container {
    grid-template-columns: repeat(2, 150px);
  }
}

/* 3列布局规则 */
@media (min-width: 490px) {
  .container {
    grid-template-columns: repeat(3, 150px);
  }
}

HTML结构保持你原有的顺序即可，Grid会自动将Widget放在第一列并占据两行，其他卡片会自动填充剩余空间，不会出现空白区域。

方案二：纯Flexbox实现 #

Flexbox是一维布局，要实现跨行效果需要通过嵌套容器结合媒体查询模拟：

修改后的CSS代码：

.container {
  margin: 50px 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  min-width: 320px;
  max-width: 490px;
  border: 3px solid rgb(0, 22, 117);
}

.card {
  width: 150px;
  height: 100px;
  background-color: bisque;
}

.widget {
  height: 220px;
  width: 150px;
  background-color: rgb(134, 204, 245);
}

/* 2列布局：将Widget与前2张卡片归为一组 */
@media (min-width: 320px) and (max-width: 489px) {
  .container {
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 1000px; /* 设置足够大的高度让内容换行 */
  }
  .widget { order: 1; }
  .card:nth-child(2), .card:nth-child(3) { order: 2; }
  .card:nth-child(n+4) { order: 3; }
}

/* 3列布局：将Widget与前4张卡片归为一组 */
@media (min-width: 490px) {
  .container {
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 1000px;
  }
  .widget { order: 1; }
  .card:nth-child(2), .card:nth-child(3), .card:nth-child(4), .card:nth-child(5) { order: 2; }
  .card:nth-child(n+6) { order: 3; }
}

该方案通过将主容器设为纵向排列并换行，利用order属性调整元素顺序，让Widget和对应数量的卡片排在同一列区域，以此模拟跨行效果。不过相比Grid，Flex方案代码复杂度更高，需要精确控制元素顺序和容器高度。

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