使用 flexbox 控制连续的项目数

Question

我想在第一行显示 4 个项目，但在第二行只显示 3 个，然后在第三行显示 4 个，在第四行显示 3 个，依此类推...

我已经实现了这一点，nth-child但是代码太多而且不灵活和可扩展。

flex 可以吗？或网格？

* {
  box-sizing: border-box;
}

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-wrapper .grid-item {
  width: 25%;
  text-align: center;
  padding: 5px;
}

p {
  background: #ddd;
  padding: 15px;
}

<div class="grid-wrapper">
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>
  <div class="grid-item">
    <p>Grid Item</p>
  </div>


</div>

Answer 1

您只需要考虑如下一条规则：

 /*7 = 4 (1st row) + 3 (2nd row) and 5 = 1st element in 2nd row (4 + 1)*/
.grid-wrapper .grid-item:nth-child(7n + 5) {
  width: calc(100%/3);
  flex-grow:0;
}

诀窍是让一个元素变大以触发包裹，然后依靠flex-grow填充空间。

完整代码

 /*7 = 4 (1st row) + 3 (2nd row) and 5 = 1st element in 2nd row (4 + 1)*/
.grid-wrapper .grid-item:nth-child(7n + 5) {
  width: calc(100%/3);
  flex-grow:0;
}

* {
  box-sizing: border-box;
}

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-wrapper .grid-item {
  width: 25%;
  text-align: center;
  padding: 5px;
  flex-grow: 1;
}

.grid-wrapper .grid-item:nth-child(7n + 5) {
  width: calc(100%/3);
  flex-grow:0;
}

p {
  background: #ddd;
  padding: 15px;
}