这里有一些解决方案，人们建议编写精确的布局css类，使用伪元素伪造最后一项，使用非flexbox方法等。

一个大问题是邻居之间的间隙(大小写对齐的按钮包装到多行)。在这种情况下，你不希望物品相互接触，就需要有空隙。我只是想添加一个适当的解决方案，尊重差距，并适用于任何数量的项目。它也是基于假的最后一个元素的想法，但更普遍。有关详细信息，请参阅代码片段注释。

html { font-size: 1px; } .container { font-size: 16rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .item { background-color: orange; border-radius: 10rem; box-sizing: border-box; color: white; margin-bottom: 10rem; padding: 15rem 10rem; text-align: center; } <!-- Our setup from design (example) used later in calculations: container-width: 100%; (can be any) max-per-row = 4; total = 6; desired-hor-gap = 10rem; (equal to vert. gap) If you go dynamic (drawing html according to the coming data either in a backend template or in a frontend template), you have to calculate and then set exact properties inline. <i> (or any real html element) is needed to set inline styles to arrange the last row properly. "2" in <i> calc function - is 6 % 4 since calc doesn't allow for "%" operator. But in real life you will calculate these numbers in JS or some backend template anyway. Formulas written in elements' calc functions. Seem to be self-descriptive, but the idea is to set for the last fake item the remainder width + hypothetical gaps. --> <div class="container"> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <i style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4 * (4 - 2) + ( 4 - 2 - 1) * 10rem);"></i> </div>

我发现了一个有效的解决方案，证明内容也可以居中/空间均匀/等等…(如果你知道单行中的条目数):

HTML:

<section class="container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>

    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
  </section>

<p>标签的数量(它可以是任何其他标签)是每行中的项目数量减1。对于不同的屏幕尺寸，您可以使用媒体查询操作它。

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.flex-item {
  width: 300px;
  height: 300px;
  background: #21BA45;
}

.container > p {
  width: 300px;
  height: 300px;
}

这个问题用CSS网格解决了，

这个解决方案只适用于你有固定数量的列，即没有。要显示在单行中的元素

->使用网格但不指定行数，随着元素数量的增加，它包装成列并动态添加行，我在这个例子中指定了三列

->你不需要给你的子/细胞任何位置，因为它会使它修复，这是我们不想要的。

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

如果你知道行中元素之间的空间宽度和行中元素的数量，这将工作:

例如:一行中有3个元素，元素之间的间距为10px

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}

我喜欢@Dan Andreasson和@Robin的简单回答Métral..然而，它并不完全适用于我。

所以不要:

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
flex: auto;
}

我使用:

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
width: calc(100%/3 - 20px); /* whatever width grid items are */
}

到目前为止，这似乎是预期的效果。

我为它做了一个SCSS mixin。

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

这是代码依赖的链接:http://codepen.io/diana_aceves/pen/KVGNZg

你只需要设置项目的宽度百分比和列数。

我希望这能帮助到你。