如何在多行 flexbox 佈局中指定換行符？ - How to specify line breaks in a multi-line flexbox layout?

問題：

Is there a way to make a line break in multiple line flexbox?有沒有辦法在多行 flexbox 中換行？

For example to break after each 3rd item in this CodePen .例如在此 CodePen 中的每個第 3 項之後中斷。

.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) { background: silver; }

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

Like喜歡

.item:nth-child(3n){
  /* line-break: after; */    
}

---

解決方案：

參考一： https://en.stackoom.com/question/20knf
參考二： https://stackoom.com/question/20knf