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

justify-items
sm
md
lg
xl

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

Классы

Класс Значение
items-main-start justify-items: start;
items-main-end justify-items: end;
items-main-center justify-items: text-center;
items-main-stretch justify-items: stretch;

Описание

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

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

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

items-main-start

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

1
2
3
4
5
6
<div class="grid grid-col-3 items-main-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

items-main-end

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

1
2
3
4
5
6
<div class="grid grid-col-3 items-main-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

items-main-center

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

1
2
3
4
5
6
<div class="grid grid-col-3 items-main-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

items-main-stretch

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

1
2
3
4
5
6
<div class="grid grid-col-3 items-main-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

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

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

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

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

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

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