如果你想让最后一项与网格对齐，请使用以下代码:

网格容器

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

网格中的项

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

诀窍是将项目的max-width设置为.card-grid的max-width:after。

Codepen上的现场演示

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

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

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

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

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

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

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;
}

一个可能的解决方案是使用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

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