Разрыв строки во flex

В общем случае, это может быть и «разрыв столбца», зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction).

Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать новую строку (или столбец).

Это действительно может быть проблемой и прибегают к разным хитростям, например, использованию псевдоэлементов контейнера (after/before) чтобы добавить разделители строк/столбцов после нужных блоков.

Пример добавления разрыва строки после 4-го элемента:

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

Для нужного эффекта можно использовать свойства break-after/break-before: always. Но работает это пока только в FF.

Более надежный способ — добавление не виртуальных элементов разрыва в нужных местах:

Для более гибкого управления такие элементы можно добавить после каждого блока, и тогда легко задать правила вроде следующих:

Т.е. мы будем активировать разрыв там где нам нужно в зависимости от media query или каких то других условий. Нужно, конечно, будет учитывать наличие разделителей в формуле nth-child.

Написать комментарий

Мало букафф? Читайте есчо !

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

Использование CSS градиента цвета для текста

Февраль 28, 2022 г.

Хорошо известна функция linear-gradient, используемая для background. Нельзя ли её применить для оформления текста? Как оказывается, такая возможность ...

Читать

 

Комментарии к «Разрыв строки во flex»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: