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

align-self
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

self-cross-auto

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

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

self-cross-start

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

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

self-cross-end

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

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

self-cross-center

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

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

self-cross-stretch

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

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

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

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

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

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

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

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