html - 如果 CSS flexbox 中的最后一行，则在第一行中填充剩余宽度

Question

我有一个带有多行 flexbox 和一些 div 的容器。如果最后一行的 div 数量与其他行不同，则由于 flex-grow: 1，div 会更大。有没有办法在第一行而不是最后一行填充剩余宽度？

| 1 | 2 | 3 |        |  1  |  2  |
-------------        -------------
| 4 | 5 | 6 |  -->   | 3 | 4 | 5 |
-------------        -------------
|  7  |  8  |        | 6 | 7 | 8 |

我不知道容器的宽度、子 div 的宽度或子项的数量，所以我无法手动设置宽度。 Here是例子。

section {
  display: flex;
  flex-wrap: wrap;
  width: 10rem;
}

.reverse {
  flex-wrap: wrap-reverse;
}

div {
  height: 2.5rem;
  width: 2.5rem;
  background: lightblue;
  margin: 0.2rem;
  flex-grow: 1;
}

Corrent order, wrong layout:

<section>
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div>
</section>

Correct layout, wrong order:

<section class="reverse">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div>
</section>

Answer 1

将以下属性添加到前两个 div 元素，基本上是 1 和 2。

flex-grow: 0;
flex-basis: 46%;

否则您可以使用 flex-wrap: wrap-reverse 并明确定义相反的顺序。