Flexbox и Grid
Утилиты для управления тем, как отдельный grid элемент выравнивается вдоль своей строчной оси.
| Class | Styles |
|---|---|
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-center | justify-self: center; |
justify-self-center-safe | justify-self: safe center; |
justify-self-end | justify-self: end; |
justify-self-end-safe | justify-self: safe end; |
justify-self-stretch | justify-self: stretch; |
Используйте утилиту justify-self-auto для выравнивания элемента на основе значения свойства justify-items сетки:
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-auto ...">02</div> <!-- ... --></div>Используйте утилиту justify-self-start для выравнивания grid элемента по началу его строчной оси:
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-start ...">02</div> <!-- ... --></div>Используйте утилиты justify-self-center или justify-self-center-safe для выравнивания grid элемента по центру его строчной оси:
Измените размер контейнера, чтобы увидеть поведение выравнивания
justify-self-center
justify-self-center-safe
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center ...">02</div> <!-- ... --></div><div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-center-safe ...">02</div> <!-- ... --></div>Когда недостаточно доступного места, утилита justify-self-center-safe будет выравнивать элемент по началу контейнера вместо центра.
Используйте утилиты justify-self-end или justify-self-end-safe для выравнивания grid элемента по концу его строчной оси:
Resize the container to see the alignment behavior
justify-self-end
justify-self-end-safe
<div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end ...">02</div> <!-- ... --></div><div class="grid justify-items-stretch ..."> <!-- ... --> <div class="justify-self-end-safe ...">02</div> <!-- ... --></div>When there is not enough space available, the justify-self-end-safe utility will align the item to the start of the container instead of the end.
Use the justify-self-stretch utility to stretch a grid item to fill the grid area on its inline axis:
<div class="grid justify-items-start ..."> <!-- ... --> <div class="justify-self-stretch ...">02</div> <!-- ... --></div>Префикс a justify-self утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="justify-self-start md:justify-self-end ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.