Flexbox и Grid
align-items
Утилиты для управления позиционированием элементов flex и grid вдоль поперечной оси контейнера.
| Class | Styles |
|---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-end-safe | align-items: safe flex-end; |
items-center | align-items: center; |
items-center-safe | align-items: safe center; |
items-baseline | align-items: baseline; |
items-baseline-last | align-items: last baseline; |
items-stretch | align-items: stretch; |
Примеры
Stretch
Используйте утилиту items-stretch для растягивания элементов для заполнения поперечной оси контейнера:
<div class="flex items-stretch ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Start
Используйте утилиту items-start для выравнивания элементов по началу поперечной оси контейнера:
<div class="flex items-start ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Center
Используйте утилиту items-center для выравнивания элементов по центру поперечной оси контейнера:
<div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>End
Используйте утилиту items-end для выравнивания элементов по концу поперечной оси контейнера:
<div class="flex items-end ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Baseline
Используйте утилиту items-baseline для выравнивания элементов вдоль поперечной оси контейнера таким образом, чтобы все их базовые линии совпадали:
<div class="flex items-baseline ..."> <div class="pt-2 pb-6">01</div> <div class="pt-8 pb-12">02</div> <div class="pt-12 pb-4">03</div></div>Last baseline
Используйте утилиту items-baseline-last для выравнивания элементов вдоль поперечной оси контейнера таким образом, чтобы все их базовые линии совпадали с последней базовой линией в контейнере:
Работает над будущим рекрутинга астронавтов в Space Recruit.
Мультидисциплинарный дизайнер.
<div class="grid grid-cols-[1fr_auto] items-baseline-last"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Спенсер Шарп</h4> <p>Работает над будущим рекрутинга астронавтов в Space Recruit.</p> </div> <p>spacerecruit.com</p></div>Это полезно для обеспечения выравнивания текстовых элементов друг относительно друга, даже если они имеют разную высоту.
Адаптивный дизайн
Префикс an align-items утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="flex items-stretch md:items-center ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.