Выравнивание каждого элемента в ячейках относительно поперечной оси

align-items
sm
md
lg
xl

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

Классы

Класс Значение
items-cross-start align-items: start;
items-cross-end align-items: end;
items-cross-center align-items: center;
items-cross-stretch align-items: stretch;

Описание

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

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

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

items-cross-start

С помощью модификатора items-cross-start можно выравнить каждый элемент флексбокса к старту ячейки относительно поперечной оси.

1
2
3
<div class="grid grid-col-3 items-cross-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

items-cross-end

С помощью модификатора items-cross-end можно выравнить каждый элемент флексбокса к финишу ячейки относительно поперечной оси.

1
2
3
<div class="grid grid-col-3 items-cross-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

items-cross-center

С помощью модификатора items-cross-center можно выравнить каждый элемент флексбокса по центру ячейки относительно поперечной оси.

1
2
3
<div class="grid grid-col-3 items-cross-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

items-cross-stretch

С помощью модификатора items-cross-stretch можно растянуть каждый элемент флексбокса по размеру ячейки относительно поперечной оси.

1
2
3
<div class="grid grid-col-3 items-cross-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

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

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

Например, используйте модификатор md:items-cross-start для выравнивания каждого элемента сетки или флексбокса к началу ячейки относительно поперечной оси для экранов размером Medium и больше.

<div class="md:items-cross-start"></div>

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

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