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

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

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

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

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

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

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

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

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

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

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

Простые CSS анимации, которые оживят ваш сайт

Апрель 14, 2025 г.

Иногда даже одно лёгкое движение может сделать сайт запоминающимся. Не нужно быть мастером фронтенда, чтобы добавить немного магии в интерфейс — иногда достаточно пары строк CSS. Простые анимации делают сайт динамичным, визуально приятным и интуитивно ...

Читать

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

Как делаются сайты с адаптивным дизайном?

Апрель 7, 2016 г.

Последний писк браузерной моды - адаптивный дизайн - вызван широким внедрением в быт мощных смартфонов. По количеству ядер процессора, быстродействию и ...

Читать

Анимация свечения (мерцание)

Апрель 18, 2025 г.

Здесь мы разбираем CSS анимацию - мерцание. Это статья из цикла заметок по CSS анимации и эффектам. Эта анимация создаёт эффект мягкого свечения вокруг элемента, будто он излучает свет. Часто используется для привлечения внимания к кнопкам, ...

Читать
 

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

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



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