Flexbox и Grid
Утилиты для управления позиционированием строк в многострочных контейнерах flex и grid.
| Class | Styles |
|---|---|
content-normal | align-content: normal; |
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
content-baseline | align-content: baseline; |
content-stretch | align-content: stretch; |
Используйте content-start, чтобы упаковать строки в контейнере в начале поперечной оси:
<div class="grid h-56 grid-cols-3 content-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Используйте content-center, чтобы упаковать строки в контейнере по центру поперечной оси:
<div class="grid h-56 grid-cols-3 content-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Используйте content-end, чтобы упаковать строки в контейнере в конце поперечной оси:
<div class="grid h-56 grid-cols-3 content-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Используйте content-between, чтобы распределить строки в контейнере таким образом, чтобы между каждой строкой было равное количество пространства:
<div class="grid h-56 grid-cols-3 content-between gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Используйте content-around, чтобы распределить строки в контейнере таким образом, чтобы вокруг каждой строки было равное количество пространства:
<div class="grid h-56 grid-cols-3 content-around gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Используйте content-evenly, чтобы распределить строки в контейнере таким образом, чтобы вокруг каждого элемента было равное количество пространства, но также учитывая удвоение пространства, которое вы обычно видите между каждым элементом при использовании content-around:
<div class="grid h-56 grid-cols-3 content-evenly gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Используйте content-stretch, чтобы разрешить заполнение элементов контента доступного пространства вдоль поперечной оси контейнера:
<div class="grid h-56 grid-cols-3 content-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Используйте content-normal, чтобы упаковать элементы контента в их исходное положение, как если бы значение align-content не было установлено:
<div class="grid h-56 grid-cols-3 content-normal gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Префикс an align-content утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="grid content-start md:content-around ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.