Flexbox：将元素保留为flex-wrap之前的最后一个元素[重复]答案

【问题标题】：Flexbox: Keep element as last element before flex-wrap [duplicate]Flexbox：将元素保留为flex-wrap之前的最后一个元素[重复]
【发布时间】：2021-07-25 17:51:36
【问题描述】：

我试图将一个元素保留在包装元素列表的第一行（作为最后一个元素）。我知道使用 JS 可以做到这一点，但我想知道是否有唯一的 CSS 解决方案。我能得到的最接近的是将元素放在单独的容器中，但这会导致元素之间出现不需要的空间：

.container {
  display: flex;
}

.left {
  display: flex;
  flex-wrap: wrap;
}

.left > div {
  padding: 1rem 1.5rem;
  background: blue;
}

.right > div {
  padding: 1rem 1.5rem;
  background: red;
}

<div class="container">
  <div class="left">
    <div>Left 1</div>
    <div>Left 2</div>
    <div>Left 3</div>
    <div>Left 4</div>
    <div>Left 5</div>
    <div>Left 6</div>
    <div>Left 7</div>
    <div>Left 8</div>
    <div>Left 9</div>
  </div>
  <div class="right">
    <div>More</div>
  </div>
</div>

基本上，红色元素应该直接跟在第一行蓝色元素中的最后一个元素之后，而蓝色元素则包裹在它们的容器内。纯 CSS 可以做到这一点吗？

【问题讨论】：

如果您将flex-grow: 1; 添加到.left > div 它可以让孩子们伸展，但我不知道这是否是您想要的。您也可以尝试使用 CSS 网格并为 more 按钮设置特定的 col/row，但我也不确定这是否是您想要的
基本上没有。不适用于标准的 flexbox。这听起来更像是一个float 问题，当然，它在 flexbox 中不起作用。
我不认为你可以在使用flex-wrap 时使用 flexbox 来做到这一点，因为 flexbox 基本上用于使网页响应，并且你的代码似乎以相关方式工作。直到 div 不适合时，它才会产生空白。但是在完美契合之后，差距就消失了

标签： css flexbox

【解决方案1】：

使用 CSS-Grid 这是可能的，但有一些警告。您必须为您的孩子指定默认宽度，如果没有足够的孩子来填充一行，您可能会再次出现空白。

Codepen Demo

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, auto));
}

.container div {
  display: flex;
  padding: 1rem 1.5rem;
  background: blue;
  white-space: nowrap;
}

.container .right {
  grid-column-end: -1;
  grid-row: 1;
  padding: 1rem 1.5rem;
  background: red;
}

<div class="container">
  <div>Left 1</div>
  <div>Left 2</div>
  <div>Left 3</div>
  <div>Left 4</div>
  <div>Left 5</div>
  <div>Left 6</div>
  <div>Left 7</div>
  <div>Left 8</div>
  <div>Left 9</div>
  <div class="right">More</div>
  <div>Left 10</div>
  <div>Left 11</div>
  <div>Left 12</div>
</div>

【讨论】：