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

简单使用Jquery/Javascript技巧添加一个空div:

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('<div class="exposetab"></div>');
}

如果各个子项具有显式的宽度(例如;32%)，你可以通过在父元素中添加:after元素并给出相同的显式宽度来解决这个问题。

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

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

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

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

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

哦，男孩，我想我找到了一个很好的解决方案与最小的CSS和没有JS。看看吧:

img {width:100%;} li { display: inline-block; width:8em; list-style:none; } ul {text-align: justify;} <ul> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li> <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" /> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>

这里的关键是要记住，我们试图实现的正是text-align: justify所做的!

HTML中的空元素是为了在不改变外观的情况下完美地显示最后一行，但考虑到您试图实现的目标，可能不需要这些空元素。为了在每种情况下实现完美的平衡，您至少需要x-4个空元素，x是要显示的元素数量，或者n-2, n是要显示的列的数量。

似乎没有人在最后一项上提出弹性增长的解决方案。 这个想法是让你的最后一个伸缩物品占据所有它可以使用的位置:1。

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

.grid > *:last-child {
  flex-grow: 1;
}

注意:这个解决方案并不完美，特别是当你在你的伸缩项目中有居中的元素时，因为它将以可能巨大的最后一个伸缩项目为中心。