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

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

这里有一些解决方案，人们建议编写精确的布局css类，使用伪元素伪造最后一项，使用非flexbox方法等。

一个大问题是邻居之间的间隙(大小写对齐的按钮包装到多行)。在这种情况下，你不希望物品相互接触，就需要有空隙。我只是想添加一个适当的解决方案，尊重差距，并适用于任何数量的项目。它也是基于假的最后一个元素的想法，但更普遍。有关详细信息，请参阅代码片段注释。

html { font-size: 1px; } .container { font-size: 16rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .item { background-color: orange; border-radius: 10rem; box-sizing: border-box; color: white; margin-bottom: 10rem; padding: 15rem 10rem; text-align: center; } <!-- Our setup from design (example) used later in calculations: container-width: 100%; (can be any) max-per-row = 4; total = 6; desired-hor-gap = 10rem; (equal to vert. gap) If you go dynamic (drawing html according to the coming data either in a backend template or in a frontend template), you have to calculate and then set exact properties inline. <i> (or any real html element) is needed to set inline styles to arrange the last row properly. "2" in <i> calc function - is 6 % 4 since calc doesn't allow for "%" operator. But in real life you will calculate these numbers in JS or some backend template anyway. Formulas written in elements' calc functions. Seem to be self-descriptive, but the idea is to set for the last fake item the remainder width + hypothetical gaps. --> <div class="container"> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <div style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4);" class="item">do stuff</div> <i style="flex: 0 1 calc((100% - (4 - 1) * 10rem) / 4 * (4 - 2) + ( 4 - 2 - 1) * 10rem);"></i> </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

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

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

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

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