Flexbox и Grid
Утилиты для управления тем, как grid элементы выравниваются вдоль их строчной оси.
| Class | Styles |
|---|---|
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-end-safe | justify-items: safe end; |
justify-items-center | justify-items: center; |
justify-items-center-safe | justify-items: safe center; |
justify-items-stretch | justify-items: stretch; |
justify-items-normal | justify-items: normal; |
Используйте утилиту justify-items-start для выравнивания grid элементов по началу их строчной оси:
<div class="grid justify-items-start ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>Используйте утилиты justify-items-end или justify-items-end-safe для выравнивания grid элементов по концу их строчной оси:
Измените размер контейнера, чтобы увидеть поведение выравнивания
justify-items-end
justify-items-end-safe
<div class="grid grid-flow-col justify-items-end ..."> <div>01</div> <div>02</div> <div>03</div></div><div class="grid grid-flow-col justify-items-end-safe ..."> <div>01</div> <div>02</div> <div>03</div></div>Когда недостаточно доступного места, утилита justify-items-end-safe будет выравнивать элементы по началу контейнера вместо конца.
Используйте утилиты justify-items-center или justify-items-center-safe для выравнивания grid элементов по центру их строчной оси:
Измените размер контейнера, чтобы увидеть поведение выравнивания
justify-items-center
justify-items-center-safe
<div class="grid grid-flow-col justify-items-center ..."> <div>01</div> <div>02</div> <div>03</div></div><div class="grid grid-flow-col justify-items-center-safe ..."> <div>01</div> <div>02</div> <div>03</div></div>Когда недостаточно доступного места, утилита justify-items-center-safe будет выравнивать элементы по началу контейнера вместо центра.
Используйте утилиту justify-items-stretch для растягивания элементов вдоль их строчной оси:
<div class="grid justify-items-stretch ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>Префикс a justify-items утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="grid justify-items-start md:justify-items-center ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.