This page is being translated; the original is shown (Русский ).
Выравнивание каждого элемента по основной оси внутри ячейки
Классы items-main-* задают justify-items: где элемент сетки стоит в своей
ячейке по горизонтали — у начала, в центре, у конца или на всю ширину. Берите
их, когда элементы сетки уже своих колонок и не должны растягиваться.
Пример
Значения
Сетка из трёх колонок, элементы шириной по своему тексту. Подпись над
образцом — класс контейнера.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-3 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >items-main-start</code >
<div class ="grid grid-col-3 items-main-start gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >items-main-center</code >
<div class ="grid grid-col-3 items-main-center gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >items-main-end</code >
<div class ="grid grid-col-3 items-main-end gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >items-main-stretch</code >
<div class ="grid grid-col-3 items-main-stretch gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
items-main-startjustify-items: start—
items-main-endjustify-items: end—
items-main-centerjustify-items: center—
items-main-stretchjustify-items: stretch—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:items-main-start.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
items-main-stretch — элементы на всю ширину ячейки; значение по умолчанию.
Класс нужен, чтобы вернуть его на другой ширине экрана.items-main-start, items-main-center, items-main-end — элементы своей
ширины у начала, в центре или у конца ячейки.
Кнопки по центру колонок
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-3 items-main-center gap-2" >
<button type ="button" >Один</button >
<button type ="button" >Два</button >
<button type ="button" >Три</button >
</div >
Отдельный элемент выравнивают классы
self-main-*items-*
Ограничения
Классы работают только в сетке. Во флекс-контейнере justify-items не
действует; элементы по основной оси там располагают классы
justify-*
Начало ячейки следует направлению письма: при dir="rtl" items-main-start
прижимает к правому краю.
См. также
Предыдущая Выравнивание содержимого по основной оси Следующая Выравнивание отдельного элемента в ячейке по основной оси
