Distribute wrapped lines as a group: content-start/center/between/around/evenly. This family contains 10 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
content-none | --tw-content: none; content: var(--tw-content); |
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; |
Example#
example
<div class="flex flex-wrap content-between h-64">…</div>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- Only matters when items wrap to multiple lines
Related#
utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox