Разрыв после колонки

break-after
sm
md
lg
xl

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

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

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

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

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

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

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

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

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

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

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