如何将display:flex元素设置为3x2x3x2的交替布局样式？

完全可以实现这种3列、2列交替的布局，基于你现有的Flex代码，通过CSS的:nth-child()选择器就能精准控制不同位置的.box宽度，同时要把列间隙（column-gap）纳入宽度计算，避免布局错位。

修正后的完整代码 #

HTML（无需修改）

<div class="boxes">
  <div class="box">
    <a>
      <div class="photo">...</div>
      <div class="content">...</div>
    </a>
  </div>
  <div class="box">
    <a>
      <div class="photo">...</div>
      <div class="content">...</div>
    </a>
  </div>
  <div class="box">
    <a>
      <div class="photo">...</div>
      <div class="content">...</div>
    </a>
  </div>
  <!-- 更多box元素 -->
</div>

CSS

.boxes{
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  row-gap: 20px; /* 修正原拼写错误 */
}

/* 匹配每周期的第1/2/3个元素（对应3列行） */
.box:nth-child(5n + 1), 
.box:nth-child(5n + 2), 
.box:nth-child(5n + 3){
  display: block;
  position: relative;
  width: calc((100% - 2 * 20px) / 3); 
  /* 减去2个列间隙后，平分3份 */
}

/* 匹配每周期的第4/5个元素（对应2列行） */
.box:nth-child(5n + 4), 
.box:nth-child(5n + 5){
  display: block;
  position: relative;
  width: calc((100% - 20px) / 2); 
  /* 减去1个列间隙后，平分2份 */
}

说明 #

• 布局周期为5个元素（3+2），通过5n + x的选择器规则循环匹配对应位置的元素。
• 宽度计算必须包含column-gap的数值，否则元素会因为总宽度超过容器而提前换行。如果后续调整间隙大小，记得同步修改calc()里的数值。
• 保持justify-content: center可以让每行的元素居中对齐，符合你原有的布局需求。

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