Перенос элементов во Flexbox в определенных точках

В макете flexbox свойство flex-wrap позволяет элементам переноситься на следующую строку, когда ширина контейнера превышена. Однако в настоящее время не существует стандартного способа указать, какой элемент должен запускать перенос.

Один из способов принудительного переноса после определенного элемента — установить flex-basis равным 100% для этого элемента в медиа-запросе, нацеленном на конкретная ширина. Это заставляет элемент занимать всю ширину родительского контейнера, фактически разрывая строку после него:

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

Например, следующий код CSS будет переносить элементы списка после каждых двух элементов:

ul {
  display: flex;
  flex-wrap: wrap;
}

li:nth-child(2n) {
  flex-basis: 100%;
}

Этот метод обеспечивает гибкий способ управления поведением переноса без необходимости дополнительной разметки. Однако важно отметить, что он основан на медиа-запросах, которые в некоторых ситуациях могут привести к снижению производительности и ограничениям.