Main-axis distribution: justify-start/center/end/between/around/evenly/stretch. This family contains 17 generated classes in Nakshora 3.1.
Classes#
| Class | Generated CSS |
|---|---|
justify-normal | justify-content: normal; |
justify-start | justify-content: flex-start; |
justify-end | justify-content: flex-end; |
justify-center | justify-content: center; |
justify-between | justify-content: space-between; |
justify-around | justify-content: space-around; |
justify-evenly | justify-content: space-evenly; |
justify-stretch | justify-content: stretch; |
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-center | justify-items: center; |
justify-items-stretch | justify-items: stretch; |
justify-self-auto | justify-self: auto; |
justify-self-start | justify-self: start; |
justify-self-end | justify-self: end; |
justify-self-center | justify-self: center; |
justify-self-stretch | justify-self: stretch; |
Example#
example
<nav class="flex justify-between items-center">Logo … Links</nav>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#
- justify-between = logo left, actions right
- justify-evenly for equal gutters including edges
Common mistakes#
- Confusing justify (main axis) with items (cross axis) — the #1 flex mistake
Related#
utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox