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

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

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

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

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

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

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

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

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

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

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

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

Март 29, 2016 г.

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

Читать

Анимация прокрутки в CSS: animation-timeline: scroll()

Сентябрь 1, 2025 г.

Ещё недавно для прогресс-бара чтения на сайте приходилось подключать JavaScript: отслеживать событие scroll, вычислять процент прокрутки и менять ширину элемента. Теперь это можно сделать чисто на CSS, благодаря новой возможности — Scroll-driven animations. ...

Читать

SVG to CSS конвертер

Июнь 21, 2020 г.

Небольшая тулза по конвертации SVG картинок в CSS backgroung-image код. Рекомендую предварительно произвести оптимизацию изображения, убрать лишние/невидимые слои, маркеры программ редакторов SVG, лишние теги и т.п. Вы можете загрузить SVG в ...

Читать

CSS media query - ошибка в округлениях

Март 26, 2025 г.

Я замечал, что медиа запросы могут не срабатывать на границе т.н. брек-поинтов. К примеру, следующее правило может не срабатывать при значении 767 пикс: [crayon-68e48286b2e5b468930217/] Источниками проблем являются фича масштабирования и ...

Читать
 

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

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



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