Работа с переносом строк в многострочной flexbox-раскладке

Возникает ситуация, когда при работе с многострочной flexbox-раскладкой необходимо управлять переносом строк. Например, может потребоваться осуществить перенос строки после каждого третьего элемента.

Допустим, есть следующий код:

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

и соответствующие стили:

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

Было бы логично предположить, что можно добавить свойство line-break: after; для каждого третьего элемента, например:

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

Однако, на данный момент стандарт CSS не предусматривает такой возможности. Перенос строк в многострочной flexbox-раскладке осуществляется автоматически в зависимости от доступного пространства и свойств flex-контейнера (например, flex-wrap).

Есть несколько обходных путей для решения этой проблемы. Один из них — использование псевдоэлементов.

.container::after {
  content: "";
  flex: 100%;
}

В данном случае псевдоэлемент с шириной 100% будет выступать в роли «переноса строки». Он будет вставлен после каждого третьего элемента, заставляя все последующие элементы переходить на новую строку.

Однако, стоит помнить, что это решение может не идеально подойти для всех случаев и может потребовать дополнительной настройки.