如何用CSS Flexbox实现示例中的容器元素布局？

当然能用Flexbox搞定这个布局啦！你之前的代码差在没给带large类的元素设置合适的宽度/弹性规则，所以没法达到你想要的排列效果。下面是调整后的完整方案：

调整后的CSS代码 #

.wrapper {
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 用Flex原生的gap替代margin-bottom，更精准控制元素间距 */
}

.element {
  flex: 0 1 calc(33.333% - 13.333px); /* 小元素占容器1/3宽度，减去gap的分摊值 */
  height: 200px;
  background: green;
}

.element.large {
  flex: 0 1 calc(66.666% - 6.666px); /* 大元素占容器2/3宽度，对应减去gap分摊值 */
}

你的HTML代码无需修改 #

<div class="wrapper">
  <div class="element large"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element large"></div>
</div>

关键调整说明 #

• 用gap替代margin-bottom：gap是Flexbox专门用来设置元素间距的属性，能自动处理水平和垂直方向的间隙，不会像margin那样在最后一行留下多余的底部间距，用起来更省心。
• 弹性宽度计算逻辑：
  • 小元素：我们希望一行能放下3个，所以宽度设为容器的33.333%，再减去gap的分摊值（3个元素之间有2个间隙，每个间隙20px，所以每个小元素要减去(20px * 2) / 3 ≈13.333px）。
  • 大元素：宽度是小元素的2倍，也就是容器的66.666%，对应的分摊值是(20px *1)/2=6.666px（大元素和旁边的小元素之间只有1个间隙）。
• flex: 0 1 [宽度]的作用：0表示元素不会被强制放大，1表示允许元素在容器变窄时自动缩小，这样布局在不同屏幕宽度下都能正常换行，不会超出容器范围。

这样调整后，就能完美实现你示例图里的布局：第一行是大元素+1个小元素，中间几行每行3个小元素，最后一行是1个小元素+大元素。

内容的提问来源于stack exchange，提问作者Suresh.W