填充第一行的剩余宽度，而不是 CSS flexbox 中的最后一行答案

【问题标题】：Fill remaining width in first row instead if last row in CSS flexbox填充第一行的剩余宽度，而不是 CSS flexbox 中的最后一行
【发布时间】：2023-04-02 21:02:02
【问题描述】：

我有一个带有多行 flexbox 的容器和一些 divs。如果最后一行的 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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

这是一个使用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>

【讨论】：

【解决方案2】：

对我来说，当您在两个方向上进行布局时，这似乎是一个使用 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;
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：