Выравнивание отдельного элемента в ячейке по основной оси
Классы self-main-* задают justify-self: где один элемент сетки стоит в
своей ячейке по горизонтали, независимо от
items-main-*
контейнера. Берите их, когда один элемент сетки должен стоять иначе, чем
соседи.
Пример
Значения
Сетка из одной колонки, элемент шириной по своему тексту. Подпись над образцом — класс элемента.
self-main-auto
self-main-auto
self-main-start
self-main-start
self-main-center
self-main-center
self-main-end
self-main-end
self-main-stretch
self-main-stretch
Классы
| Класс | CSS | Значения |
|---|---|---|
self-main-auto |
justify-self: auto |
— |
self-main-start |
justify-self: start |
— |
self-main-end |
justify-self: end |
— |
self-main-center |
justify-self: center |
— |
self-main-stretch |
justify-self: stretch |
— |
Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:self-main-auto.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
self-main-auto— элемент следует классу контейнера; значение по умолчанию. Класс нужен, чтобы отменитьself-main-*на другой ширине экрана.self-main-start,self-main-center,self-main-end— элемент своей ширины у начала, в центре или у конца ячейки.self-main-stretch— элемент на всю ширину ячейки.
Кнопка у конца формы
<form class="grid gap-2">
<label>Имя <input type="text"></label>
<button class="self-main-end" type="submit">Отправить</button>
</form>
Ограничения
- Класс работает только в сетке. Во флекс-контейнере
justify-selfне действует; отодвинуть один флекс-элемент к концу строки можно отступомm-inline-start-auto. - Начало ячейки следует направлению письма: при
dir="rtl"self-main-startприжимает к правому краю.