Направление размещения

flex-direction
sm
md
lg
xl

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

Классы

Класс Значение
flex-row flex-direction: row;
flex-col flex-direction: column;
flex-row-reverse flex-direction: row-reverse;
flex-col-reverse flex-direction: column-reverse;

Описание

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

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

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

Прямое размещение в строке

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

1
2
3
<div class="flex flex-row ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Обратное размещение в строке

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

1
2
3
<div class="flex flex-row ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Прямое размещение в столбце

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

1
2
3
<div class="flex flex-col ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Обратное размещение в колонке

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

1
2
3
<div class="flex flex-col-reverse ...">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

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

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

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

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

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

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