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

我为它做了一个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

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

我希望这能帮助到你。

如果你想要一个在项目之间有一些空间的网格，并且项目开始时没有任何初始空间，那么这个简单的解决方案是有效的:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

如果你想要初始的5px空间，那么只需删除负边距:)简单。

https://jsfiddle.net/b97ewrno/2/

被接受的答案，虽然很好，但它导致第二行元素之间没有空格。

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

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

只需要添加一些具有相同属性的假项目，除了高度设置为0px到最后。

你不能。Flexbox不是一个网格系统。它没有实现您所要求的功能的语言结构，至少在使用justify-content: space between时是这样。使用Flexbox最接近的方法是使用列方向，这需要设置显式的高度:

http://cssdeck.com/labs/pvsn6t4z(注:不包括前缀)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

然而，只使用列会更简单，它有更好的支撑，不需要设置特定的高度:

http://cssdeck.com/labs/dwq3x6vr(注:不包括前缀)

ul {
  columns: 15em;
}