CSS Flexbox Layout - 3列和2列交换

Question

任何人都可以使用Flexbox帮助我使用此布局。 我需要一个从3列到2列重复然后返回3列的布局。 我在下面添加了一个关于我的意思的图片。

Answer 1

您可以在每个nth-child(10n + 4)和nth-child(10n + 10)项目上使用双倍展示尺寸。

.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: calc(33.33% - 10px);
  height: 70px;
  margin: 5px;
  background: #BD1522;
}
.item:nth-child(10n + 4),
.item:nth-child(10n + 10) {
  flex: calc(66.66% - 10px);
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>