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

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

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

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

可以使用“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

假设:

你想要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>

一个可能的解决方案是使用justify-content: flex-start;在.grid容器中，其子元素的大小限制以及适当子元素的边距——取决于所需的列数。

对于一个3列网格，基本的CSS看起来是这样的:

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

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

这是另一个不完美的解决方案，但它有效。

http://codepen.io/tuxsudo/pen/VYERQJ

我发现了一个有效的解决方案，证明内容也可以居中/空间均匀/等等…(如果你知道单行中的条目数):

HTML:

<section class="container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>

    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
    <p aria-hidden="true"></p>
  </section>

<p>标签的数量(它可以是任何其他标签)是每行中的项目数量减1。对于不同的屏幕尺寸，您可以使用媒体查询操作它。

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.flex-item {
  width: 300px;
  height: 300px;
  background: #21BA45;
}

.container > p {
  width: 300px;
  height: 300px;
}

如果你想在网格视图中对齐项目，即使是最后一个元素。确保卡片宽度为100% 使用下面的css。效果很好

.container {
  /* ... snip ... */
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  justify-content: space-between;
  grid-gap: 20px;
}