Разрыв до элемента

break-before
sm
md
lg
xl

В SIMAI Framework с помощью модификатора можно управлять разрывом столбца или страницы до элемента.

Классы

Класс Значение
break-before-auto break-before: auto
break-before-avoid break-before: avoid
break-before-all break-before: all
break-before-avoid-page break-before: avoid-page
break-before-page break-before: page
break-before-left break-before: left
break-before-right break-before: right
break-before-column break-before: column

Описание

Адаптивный модификатор. Позволяет управлять разрывом столбца или страницы до элемента, в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • break-before-auto - равномерное распределение;
    • break-before-avoid - отмена разрыва страницы;
    • break-before-all - принудительный разрыв страницы;
    • break-before-avoid-page - отмена разрыва страницы до текущего элемента;
    • break-before-page - обязательный разрыв и переход к новой колонке до текущего элемента;
    • break-before-left - принудительная расстановка одного или двух разрывов страницы до текущего элемента, следующий элемент становится слева
    • break-before-right - принудительная расстановка одного или двух разрывов страницы до текущего элемента, следующий элемент становиться справа
    • break-before-column - принудительный разрыв и переход к новой колонке перед текущим элементом

Пример

С помощью модификатора break-before-{значение} для управления разрывом столбца или страницы после элемента. Например, используйте модификатор break-before-column для принудительного разрыва столбца 

<div class="layout-col-2">
  <p>Что ж, позволь мне кое-что тебе сказать, ...</p>
  <p class="break-before-column">Конечно, смейтесь...</p>
  <p>Может быть, мы сможем жить без...</p>
  <p>Смотреть. Если вы думаете, что это...</p>
</div>

Адаптивность

Для управления разрывом стоблца или страницы после элемента, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).

Например, используйте модификатор md:break-before-column для отображения фрагментов элемента как единое целое для экранов размером Medium и больше. 

<div class="md:break-before-column"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью