Override one child's cross-axis alignment: self-start/center/end/stretch/auto. This family contains 6 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
self-auto | align-self: auto; |
self-start | align-self: flex-start; |
self-end | align-self: flex-end; |
self-center | align-self: center; |
self-stretch | align-self: stretch; |
self-baseline | align-self: baseline; |
Example#
example
<div class="flex items-start">
<div>top</div>
<div class="self-end">bottom</div>
</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.
Related#
utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox