flex-1 grows+shrinks equally; flex-none opts out; flex-initial/auto fine-tune. This family contains 4 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
flex-1flex: 1 1 0%;
flex-autoflex: 1 1 auto;
flex-initialflex: 0 1 auto;
flex-noneflex: none;

Example#

example
html
<div class="flex">
  <aside class="flex-none w-64">Sidebar</aside>
  <main class="flex-1">Fills the rest</main>
</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#

  • Sidebar layouts: flex-none sidebar + flex-1 main
  • Equal columns: flex-1 on each child

Common mistakes#

  • flex-1 children overflowing with long words — add min-w-0

utilities/grid/grid-template-columns|Grid · comparisons/grid-vs-flexbox|Grid vs flexbox