我知道这里有很多答案，但是…最简单的方法是使用网格而不是使用重复填充和自动填充的网格模板列，其中您必须设置为每个元素提供的像素数，从代码片段代码中选取100px。

.exposegrid { display: grid; grid-template-columns: repeat(auto-fill, 100px); justify-content: space-between; } .exposetab { width: 100px; height: 66px; background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 5px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); margin-bottom: 10px; } <div class="exposegrid"> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> <div class="exposetab"></div> </div>

可以使用“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: 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即将出现缺口，但我将添加一个有效的解决方案。

它使用兄弟组合子检查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>

假设:

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

如果你想要一个在项目之间有一些空间的网格，并且项目开始时没有任何初始空间，那么这个简单的解决方案是有效的:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

如果你想要初始的5px空间，那么只需删除负边距:)简单。

https://jsfiddle.net/b97ewrno/2/

被接受的答案，虽然很好，但它导致第二行元素之间没有空格。