对于将来的问题，也可以通过使用float属性并在每个3个元素中清除它来实现。

我举了一个例子。

.grid { display: inline-block; } .cell { display: inline-block; position: relative; float: left; margin: 8px; width: 48px; height: 48px; background-color: #bdbdbd; font-family: 'Helvetica', 'Arial', sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; text-indent: 4px; color: #fff; } .cell:nth-child(3n) + .cell { clear: both; } <div class="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> <div class="cell">7</div> <div class="cell">8</div> <div class="cell">9</div> <div class="cell">10</div> </div>

从我的角度来看，使用<hr>元素作为伸缩项之间的换行符更有语义意义。

.container { 显示:flex; flex-flow:包装; ｝ .container hr { 宽度:100%; ｝ < div class = "容器" > < div > < / div > 1 2 < div > < / div > <人力资源> < div > 3 < / div > 2 < div > < / div > .．. < / div >

在Chrome 66, Firefox 60和Safari 11中测试。

.container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } <div class="container"> <div> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> <div class="item">10</div> </div>

您可以尝试将项目包装在像这样的dom元素中。有了这个，你不需要知道很多CSS只是有一个良好的结构将解决问题。

我只是想把这个答案放在一起，意在提醒大家，在适当的条件下，你有时不需要过度思考手头的问题。你想要的也许可以通过flex: wrap和max-width来实现，而不是:n -child。

ul { display: flex; flex-wrap: wrap; justify-content: center; max-width: 420px; list-style-type: none; background-color: tomato; margin: 0 auto; padding: 0; } li { display: inline-block; background-color: #ccc; border: 1px solid #333; width: 23px; height: 23px; text-align: center; font-size: 1rem; line-height: 1.5; margin: 0.2rem; flex-shrink: 0; } <div class="root"> <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>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> <li>U</li> <li>V</li> <li>W</li> <li>X</li> <li>Y</li> <li>Z</li> </ul> </div>

https://jsfiddle.net/age3qp4d/

另一个不需要添加任何额外标记的解决方案是添加一些动态边距来分隔元素。

在本例中，这可以通过calc()的帮助来完成，只需在3n+2元素(2,5,8)上添加左边距和右边距。

.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

片段的例子

.container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } .item:nth-child(3n+2) { background: silver; margin: 10px calc(50% - 175px); } <div class="container"> <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 class="item">10</div> </div>

@Oriol有一个很好的答案，遗憾的是，截至2017年10月，既不显示:内容，也不分页后得到广泛支持，更好地说，这是关于Firefox的支持，但不支持其他播放器，我已经提出了以下“hack”，我认为比硬编码在每个第三个元素后中断，因为这将使它很难使页面移动友好。

正如所说，这是一个黑客，缺点是你需要添加相当多的额外元素，但它做到了技巧，即使在过时的IE11上也能跨浏览器工作。

“黑客”是简单地在每个div后面添加一个额外的元素，它被设置为display:none，然后使用css n -child来决定哪个元素应该实际上是可见的，强制像这样的行制动:

.container { background: tomato; display: flex; flex-flow: row wrap; justify-content: space-between; } .item { width: 100px; background: gold; height: 100px; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px } .item:nth-child(3n-1) { background: silver; } .breaker { display: none; } .breaker:nth-child(3n) { display: block; width: 100%; height: 0; } <div class="container"> <div class="item">1</div> <p class="breaker"></p> <div class="item">2</div> <p class="breaker"></p> <div class="item">3</div> <p class="breaker"></p> <div class="item">4</div> <p class="breaker"></p> <div class="item">5</div> <p class="breaker"></p> <div class="item">6</div> <p class="breaker"></p> <div class="item">7</div> <p class="breaker"></p> <div class="item">8</div> <p class="breaker"></p> <div class="item">9</div> <p class="breaker"></p> <div class="item">10</div> <p class="breaker"></p> </div>