在CSS flexbox中，将第一行的剩余宽度填充而不是最后一行。

Question

我有一个多行的容器，其中包含一些 div。如果最后一行的 div 数量与其他行不同，那么由于 flex-grow: 1 的缘故，div 将变得更大。有没有办法在第一行填充剩余的宽度而不是在最后一行？

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

我不知道容器的宽度、子div的宽度或者子元素的数量，因此无法手动设置宽度。 这里是示例。

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>

- Michal

Answer 1

请将以下属性添加到前两个div元素中，即1和2。

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

或者你可以使用 flex-wrap: wrap-reverse 并明确地以相反顺序定义顺序。

- DevLasting

Answer 2

这里有一个技巧，使用nth-child和nth-last-child结合起来来定位第一个和第二个元素。我们基本上有两种情况，需要第一个元素是全宽或者第一个和第二个元素是半宽：

section {
  display: flex;
  flex-wrap: wrap;
  width: 10rem;
  border:2px solid;
}

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

section > :nth-child(1):nth-last-child(3n + 1) {
   flex-basis:100%
}

section > :nth-child(1):nth-last-child(3n + 2),
section > :nth-child(2):nth-last-child(3n + 1) {
   flex-basis:40%
}

<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>

<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><div>9</div><div>10</div><div>11</div>
</section>


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

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

- Temani Afif

Answer 3

在我看来，当你需要在两个方向上进行布局时，使用CSS Grid似乎是一个不错的选择。你可以尝试像这样的代码：

.grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: .5rem;

}

.grid div{
  width: 100%;
  grid-column: span 2;
}

.grid div:nth-child(-n+2){
  grid-column: span 3;
}

- Brian Qian