flex-row, flex-col and their reverse variants — the axis switch. This family contains 4 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
flex-row | flex-direction: row; |
flex-row-reverse | flex-direction: row-reverse; |
flex-col | flex-direction: column; |
flex-col-reverse | flex-direction: column-reverse; |
Example#
example
<div class="flex flex-col md:flex-row gap-6">Stacks, then rows</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#
- The responsive stack pattern: flex-col md:flex-row
- Reverse variants fix visual-order vs DOM-order needs
Common mistakes#
- Forgetting children re-order across the NEW axis
Related#
utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox