Перенос элементов

flex-wrap
sm
md
lg
xl

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

Классы

Класс Значение
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;

Описание

Адаптивный модификатор. Управляет переносом элементов флексбокса в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • flex-wrap - разрешает размещать элементы флексбокса в несколько линий;
    • flex-wrap-reverse - разрешает размещать элементы флексбокса в несколько линий, но в обратном порядке;
    • flex-nowrap - размещает элементы флексбокса в одну линию.

Прямой перенос

С помощью модификатора flex-wrap можно разрешить размещать элементы флексбокса в несколько линий.

1
2
3
4
5
6
7
<div class="flex flex-wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

Обратный перенос

С помощью модификатора flex-wrap-reverse можно разрешить размещать элементы флексбокса в обратном порядке и несколько линий.

1
2
3
4
5
6
7
<div class="flex flex-wrap-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

Без переноса

С помощью модификатора flex-nowrap можно запретить размещать элементы флексбокса в несколько линий.

1
2
3
4
5
6
7
<div class="flex flex-nowrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

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

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

Например, используйте модификатор md:flex-wrap для разрешения размещения элементов в несколько лининй для экранов размером Medium и больше.

<div class="md:flex-wrap"></div>

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

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