可以使用“flex-start”手动添加页边距。它需要一些数学技巧，但绝对容易做到，并且很容易与CSS预处理器(如LESS)一起使用。

请看这个LESS mixin的例子:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

然后它可以很容易地用来显示一个响应式网格布局:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

这里有一个例子

http://codepen.io/anon/pen/YyLqVB?editors=110

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

你不能。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;
}

假设:

你想要4列网格布局与包装 项目的数量不一定是4的倍数

除了第1、5、9项以外，在每一项上都设置左距。如果左边的边距是10px，那么每行有30px的边距分布在4个项目中。项目宽度百分比计算方法如下:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

这是一个体面的工作，涉及flexbox最后一行的问题。

.flex { display: flex; flex-direction: row; flex-wrap: wrap; margin: 1em 0 3em; background-color: peachpuff; } .item { margin-left: 10px; border: 1px solid; padding: 10px; width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4); background-color: papayawhip; } .item:nth-child(4n + 1) { margin-left: 0; } .item:nth-child(n + 5) { margin-top: 10px; } <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>

我喜欢@Dan Andreasson和@Robin的简单回答Métral..然而，它并不完全适用于我。

所以不要:

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

我使用:

.grid {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.grid::after {
content: "";
width: calc(100%/3 - 20px); /* whatever width grid items are */
}

到目前为止，这似乎是预期的效果。

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

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)后使用多个::实现。