This page is being translated; the original is shown (Русский ).
Выравнивание каждого элемента в ячейках по поперечной оси
Классы items-cross-* задают align-items: как элементы стоят поперёк
основной оси — в строке флекс-контейнера по вертикали, а в ячейках сетки по
вертикали ячейки. Берите их, чтобы выровнять по центру иконку и подпись или
не растягивать карточки на высоту соседей.
Пример
Значения
Флекс-контейнер заданной высоты, во втором элементе две строки текста.
Подпись над образцом — класс контейнера.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >items-cross-start</code >
<div class ="flex items-cross-start gap-1 h-e8 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<br >две строки</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-cross-center</code >
<div class ="flex items-cross-center gap-1 h-e8 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<br >две строки</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-cross-end</code >
<div class ="flex items-cross-end gap-1 h-e8 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<br >две строки</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-cross-stretch</code >
<div class ="flex items-cross-stretch gap-1 h-e8 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<br >две строки</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
</div >
</div >
</div >
Базовая линия
Текст разного размера. По центру выравниваются середины элементов, по базовой
линии — строки текста в них.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >items-cross-center</code >
<div class ="flex items-cross-center gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="text-1/2 p-1 bg-primary-container color-on-primary-container radius-ui" >Мелкий</span >
<span class ="text-3 h-e0 p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >Крупный</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Обычный</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >items-cross-baseline</code >
<div class ="flex items-cross-baseline gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="text-1/2 p-1 bg-primary-container color-on-primary-container radius-ui" >Мелкий</span >
<span class ="text-3 h-e0 p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >Крупный</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Обычный</span >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
items-cross-startalign-items: start—
items-cross-endalign-items: end—
items-cross-centeralign-items: center—
items-cross-baselinealign-items: baseline—
items-cross-stretchalign-items: stretch—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:items-cross-start.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
items-cross-stretch — элементы растягиваются на всю высоту строки; значение
по умолчанию. Класс нужен, чтобы вернуть его на другой ширине экрана.items-cross-start, items-cross-center, items-cross-end — элементы
своей высоты у начала, в центре или у конца.items-cross-baseline — строки текста на одной линии: подпись рядом с
крупным числом, поля формы с подписями разного размера.
Иконка и подпись
HTML wrap_text Wrap source lines content_copy Copy
<a class ="flex items-cross-center gap-1" href ="/profile" >
<img class ="w-c0 h-c0" src ="profile.svg" alt ="" >
Профиль
</a >
Отдельный элемент выравнивают классы
self-cross-*items-*
Ограничения
При flex-col
items-cross-stretch не растягивает элемент, у которого задана высота.
См. также
Предыдущая Выравнивание содержимого по поперечной оси Следующая Выравнивание отдельного элемента по поперечной оси
