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

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

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

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

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

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

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

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

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

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

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

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

Вставка переменной в инлайновое изображение в LESS

Август 29, 2019 г.

Небольшие векторные элементы очень удобно вставлять как часть CSS кода. Хочу показать пример, как сделать их еще и параметрически зависимыми, при компиляции из LESS. К примеру, при ребрендинге или использовании кусочка стилей на другом сайте, вы ...

Читать

Как запретить растягивание textarea

Февраль 27, 2017 г.

Тэг TextArea - незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый ...

Читать

 

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

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



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