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

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

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

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

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

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

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

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

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

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

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

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

Эффект размытия blur средствами CSS

Декабрь 23, 2015 г.

В интернете много решений, я попробовал, наверное, все :) Основная проблема - не удаётся достичь кросс-браузерности. Как всегда, отличился IE. Для ...

Читать

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-6628d2ccb7abf838129055/] Ключевым является значение auto для левого и правого отступов. ...

Читать

 

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

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



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