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

justify-self
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

self-main-auto

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

1
<div class="grid grid-col-3">
    <div></div>
    <div class="self-main-auto">1</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

self-main-start

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

1
<div class="grid grid-col-3">
    <div></div>
    <div class="self-main-start">1</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

self-main-end

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

1
<div class="grid grid-col-3">
    <div></div>
    <div class="self-main-end">1</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

self-main-center

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

1
<div class="grid grid-col-3">
    <div></div>
    <div class="self-main-center">1</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

self-main-stretch

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

1
<div class="grid grid-col-3">
    <div></div>
    <div class="self-main-stretch">1</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

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

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

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

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

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

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