html - 使用 flexbox 控制一行中的元素数

Question

我想在第一行显示 4 个元素，但在第二行只显示 3 个，然后在第 3 行显示 4 个，在第 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 来填充空间。

完整代码

* {
  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;
}

<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 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 class="grid-item">
    <p>Grid Item</p>
  </div>
</div>