В общем случае, это может быть и «разрыв столбца», зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction).
Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать новую строку (или столбец).
Это действительно может быть проблемой и прибегают к разным хитростям, например, использованию псевдоэлементов контейнера (after/before) чтобы добавить разделители строк/столбцов после нужных блоков.
Пример добавления разрыва строки после 4-го элемента:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.container { display: flex; flex-direction: row; flex-wrap: wrap; } .container::before { content: ''; width: 100%; order: 1; } .child-block::nth-child(n + 5) { order: 1; } |
Очевидно, что так вы сможете добавить только два разрыва в ваш контейнер, так как создать можно лишь два псевдоэлемента.
Для нужного эффекта можно использовать свойства break-after/break-before: always. Но работает это пока только в FF.
Более надежный способ — добавление не виртуальных элементов разрыва в нужных местах:
|
1 2 3 |
.child-block-delemitter { flex-basis: 100%; } |
Для более гибкого управления такие элементы можно добавить после каждого блока, и тогда легко задать правила вроде следующих:
|
1 2 3 |
.child-block::nth-child(6n) + .child-block-delemitter { flex-basis: 100%; } |
Т.е. мы будем активировать разрыв там где нам нужно в зависимости от media query или каких то других условий. Нужно, конечно, будет учитывать наличие разделителей в формуле nth-child.
