如果你想在网格视图中对齐项目，即使是最后一个元素。确保卡片宽度为100% 使用下面的css。效果很好

.container {
  /* ... snip ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-between;
  grid-gap: 20px;
}

这是许多答案的组合，但它确实是我所需要的——这是，将flex容器中的最后一个子元素对齐到左侧，同时保持空间之间的行为(在这种情况下，它是一个三列布局)。

加价如下:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

正如其他海报所提到的-没有干净的方法来左对齐flexbox的最后一行(至少按照目前的规范)

然而，它的价值在于:使用CSS Grid Layout模块，这是非常容易的:

基本上相关代码可以归结为:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1)将容器元素设置为网格容器

2)设置网格的自动列宽度为100px。注意使用了自动填充(而不是自动贴合(对于单行布局)将空轨道折叠为0)，导致项目展开以占用剩余空间。当网格只有一行时，这将导致一个合理的“空格”布局，这在我们的情况下不是我们想要的。(请查看这个演示，看看它们之间的区别))。

3)为网格行和列设置间隙/沟槽-在这里，因为想要一个“空间之间”的布局-间隙实际上是一个最小的间隙，因为它会根据需要增长。

4)类似于flexbox。

ul { 显示:网格; Grid-template-columns: repeat(自动填充，100px); grid-gap: 1快速眼动; justify-content:之间的空间; /*无趣属性*/ list-style:没有; 背景:小麦; 填充:2快速眼动; 宽度:80大众; 保证金:0自动; } 李{ 高度:50 px; 边框:1px纯绿色; } < ul > <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> <李> < /李> < / ul >

Codepen演示(调整大小以查看效果)

没有任何额外的标记，只是添加::after为我指定列的宽度。

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

使用这样的HTML:

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

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

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

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

这里有一些解决方案，人们建议编写精确的布局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>