Flexbox и Grid
Утилиты для управления тем, как flex и grid элементы позиционируются вдоль главной оси контейнера.
| Class | Styles |
|---|---|
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-end-safe | justify-content: safe flex-end; |
justify-center | justify-content: center; |
justify-center-safe | justify-content: safe center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-stretch | justify-content: stretch; |
justify-baseline | justify-content: baseline; |
justify-normal | justify-content: normal; |
Используйте утилиту justify-start для выравнивания элементов по началу главной оси контейнера:
<div class="flex justify-start ..."> <div>01</div> <div>02</div> <div>03</div></div>Используйте утилиты justify-center или justify-center-safe для выравнивания элементов по центру главной оси контейнера:
Измените размер контейнера, чтобы увидеть поведение выравнивания
justify-center
justify-center-safe
<div class="flex justify-center ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div><div class="flex justify-center-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>Когда недостаточно доступного места, утилита justify-center-safe будет выравнивать элементы по началу контейнера вместо центра.
Используйте утилиты justify-end или justify-end-safe для выравнивания элементов по концу главной оси контейнера:
Измените размер контейнера, чтобы увидеть поведение выравнивания
justify-end
justify-end-safe
<div class="flex justify-end ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div><div class="flex justify-end-safe ..."> <div>01</div> <div>02</div> <div>03</div> <div>03</div></div>Когда недостаточно доступного места, утилита justify-end-safe будет выравнивать элементы по началу контейнера вместо конца.
Используйте утилиту justify-between для выравнивания элементов вдоль главной оси контейнера так, чтобы между каждым элементом было равное количество места:
<div class="flex justify-between ..."> <div>01</div> <div>02</div> <div>03</div></div>Use the justify-around utility to justify items along the container's main axis such that there is an equal amount of space on each side of each item:
<div class="flex justify-around ..."> <div>01</div> <div>02</div> <div>03</div></div>Use the justify-evenly utility to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justify-around:
<div class="flex justify-evenly ..."> <div>01</div> <div>02</div> <div>03</div></div>Use the justify-stretch utility to allow content items to fill the available space along the container's main axis:
<div class="flex justify-stretch ..."> <div>01</div> <div>02</div> <div>03</div></div>Use the justify-normal utility to pack content items in their default position as if no justify-content value was set:
<div class="flex justify-normal ..."> <div>01</div> <div>02</div> <div>03</div></div>Префикс a justify-content утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="flex justify-start md:justify-between ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.