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

一个可能的解决方案是使用justify-content: flex-start;在.grid容器中，其子元素的大小限制以及适当子元素的边距——取决于所需的列数。

对于一个3列网格，基本的CSS看起来是这样的:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

这是另一个不完美的解决方案，但它有效。

http://codepen.io/tuxsudo/pen/VYERQJ

有一种没有flexbox的方法，尽管您需要满足以下条件。1)容器有填料。2)项目是相同的大小，你确切地知道你想要多少每行。

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

容器右侧较小的填充允许每个列表项右侧的额外填充。假设与列表对象相同的父对象中的其他项被填充了0 5%，它将与它们齐平。你也可以调整百分比到你想要的幅度，或者使用计算px值。

当然，你也可以使用n -child (IE 9+)来删除每第三个框上的空白。

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

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

没有任何额外的标记，只是添加::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>

我可以用容器上的justify-content: space between来做