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

没有任何额外的标记，只是添加::after为我指定列的宽度。

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

使用这样的HTML:

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

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

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

假设:

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

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

尽管Flexbox即将出现缺口，但我将添加一个有效的解决方案。

它使用兄弟组合子检查2个条件。

它检查的第一个条件是元素是否位于倒数第二div:

对于4列布局，我们需要检查位置2和3 检查它是否在第4个div的第二行:第n -of-type(4n+2)或第3行div:第n -of-type(4n+3)

对于3列布局，我们只需要检查位置2

div:nth-of-type(3n+2)

然后我们可以像下面这样组合4列布局

div:nth-last-child(2) + div:nth-of-type(4n+2)

div:nth-last-child(2) + div:nth-of-type(4n+3)

我们还需要注意一种边情况，任何3n+2且倍数为4的数字都将得到35%的右边距div:n -last-child(2) + div:n -of-type(4n+4)

3栏布局将

div:nth-last-child(2) + div:nth-of-type(3n+2)

然后我们需要给上面的选择器添加一个边距。右边的差额将需要计算，并将取决于弹性基制。

我添加了一个带有3列和4列的示例和一个媒体查询。我还添加了一个小的JavaScript按钮，添加了一个新的div，所以你可以检查它的工作。

它有点像CSS，但很好用。 如果你想要更多的解释，我也在我的网站上写过。 https://designkojo.com/css-programming-using-css-pseudo-classes-and-combinators

var number = 11; $("#add").on("click", function() { number = number + 1; $("#main").append("<div>" + number + "</div>"); }); body { margin: 0; } main{ display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; /* vertical */ justify-content: space-between; min-width: 300px; max-width: 1200px; margin: 20px auto; background-color: lightgrey; height: 100vh; } div { flex-basis: 30%; background-color: #5F3BB3; min-height: 20px; height: 50px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; color: #9af3ff; font-size: 3em; } div:nth-last-child(2) + div:nth-of-type(3n+2) { background-color: #f1b73e; margin-right: 35%; } @media screen and (min-width: 720px) { div { flex-basis: 22%; } div:nth-last-child(2) { background-color: greenyellow; } div:nth-of-type(4n+2) { background-color: deeppink; } /* Using Plus combinator is for direct sibling */ div:nth-last-child(2) + div:nth-of-type(4n+2) { background-color: #f1b73e; margin-right: 52%; } div:nth-last-child(2) + div:nth-of-type(4n+3) { background-color: #f1b73e; margin-right: 26%; } /* Also need to set the last to 0% to override when it become (3n+2) * Any number that is 3n+2 & multiple of 4 will get the 35% margin-right * div:nth-last-child(2) + div:nth-of-type(3n+2) */ div:nth-last-child(2) + div:nth-of-type(4n+4) { background-color: #f1b73e; margin-right: 0; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>My New Project</title> </head> <body> <header> </header> <button id="add">Add</button> <main id="main"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="action.js"></script> </body> </html>