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