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

加价如下:

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

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

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

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

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

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

你还可以这样做:

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

使用flexbox和一些媒体查询，我做了这个小小的变通:http://codepen.io/una/pen/yNEGjv(它有点俗气，但有效):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

一种技术是插入一些额外的元素(与您希望在一行中拥有的最大元素数量一样多)，这些元素的高度为零。空间仍然是分开的，但多余的行塌陷为空:

http://codepen.io/dalgard/pen/Dbnus

body { padding: 5%; } div { overflow: hidden; background-color: yellow; } ul { display: flex; flex-wrap: wrap; margin: 0 -4px -4px 0; list-style: none; padding: 0; } li { flex: 1 0 200px; height: 200px; border-right: 4px solid black; border-bottom: 4px solid black; background-color: deeppink; } li:empty { height: 0; border: none; } *, :before, :after { box-sizing: border-box; } <div> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>

在未来，这可以通过在(n)后使用多个::实现。

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