Сортировка
order
sm
md
lg
xl
В SIMAI Framework с помощью модифкаторов можно управлять сортировкой элементов флексбокса и сетки.
Классы
| Класс | Значение |
|---|---|
order-1 |
order: 1; |
order-2 |
order: 2; |
order-3 |
order: 3; |
order-4 |
order: 4; |
order-5 |
order: 5; |
order-6 |
order: 6; |
order-7 |
order: 7; |
order-8 |
order: 8; |
order-9 |
order: 9; |
order-10 |
order: 10; |
order-11 |
order: 11; |
order-12 |
order: 12; |
order-first |
order: -9999; |
order-last |
order: 9999; |
order-none |
order: 0; |
Описание
Адаптивный модификатор. Управляет порядком отображения элементов флексбокса и сетки в зависимости от размера области просмотра.
Модификатор сортировки влияет только на порядок отображения элементов и не влияет на их логический порядок или табуляцию.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
order-{1...12}- указывает порядок сортировки от 1 до 12;order-first- отображать первым;order-last- отображать последним;order-none- размещает элементы флексбокса в одну линию.
Пример
1
2
3
<div class="flex content-main-between">
<div class="order-last">1</div>
<div>2</div>
<div>3</div>
</div>
Адаптивность
Для управления сортировкой элементов флексбокса, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору сортировки.
Например, используйте модификатор md:order-last для устновки элемента сортировки последним для экранов размером Medium и больше.
<div class="md:order-last"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.