Cross-axis alignment: items-start/center/end/baseline/stretch. This family contains 5 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-center | align-items: center; |
items-baseline | align-items: baseline; |
items-stretch | align-items: stretch; |
Example#
example
<div class="flex items-center gap-3">Centered row</div>Responsive & variants#
Every class here accepts screen prefixes (xxs: … 5xl:) 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#
- items-center is the most-used flex utility in existence
- items-baseline aligns text across mixed sizes
Related#
utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox