正如其他海报所提到的-没有干净的方法来左对齐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演示(调整大小以查看效果)

你还可以这样做:

.exposegrid:last-child {
  margin-right: auto;
}

这很老套，但对我来说很管用。我试图达到一致的间距/边距。

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

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

加价如下:

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

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

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

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

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

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

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