@mastors/flexer

<!-- Block flex container -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Inline flex — wraps tightly around children -->
<span class="inline-flex items-center gap-2">
  <i class="fa-solid fa-star"></i>
  <span>Inline badge</span>
</span>

<!-- Responsive: flex on all, column on mobile -->
<div class="flex md:flex">...</div>

<div class="flex flex-row gap-3">
  <div>1</div><div>2</div><div>3</div>
</div>

<div class="flex flex-row-reverse gap-3">
  <div>1</div><div>2</div><div>3</div>
</div>

<div class="flex flex-col gap-3">
  <div>1</div><div>2</div><div>3</div>
</div>

<!-- Responsive: column on mobile, row on md+ -->
<div class="flex flex-col md:flex-row gap-4">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

<!-- Items wrap naturally at container edge -->
<div class="flex flex-wrap gap-2">
  <div>Item 1</div><div>Item 2</div><div>Item 3</div>
  <div>Item 4</div><div>Item 5</div>
</div>

<!-- Wrap in reverse direction -->
<div class="flex flex-wrap-reverse gap-2">...</div>

<!-- Force single line (overflow possible) -->
<div class="flex flex-nowrap overflow-x-auto gap-2">...</div>

<!-- Column direction with wrapping -->
<div class="flex flex-flow-col-wrap gap-3" style="height:8rem">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>

<!-- Row + no wrap (single scroll line) -->
<div class="flex flex-flow-row-nowrap gap-3 overflow-x-auto">
  <div>1</div><div>2</div><div>3</div>
</div>

<!-- Middle item grows to fill all remaining space -->
<div class="flex gap-3">
  <div class="grow-0">Fixed</div>
  <div class="grow">Grows to fill space</div>
  <div class="grow-0">Fixed</div>
</div>

<!-- All three items grow equally -->
<div class="flex gap-3">
  <div class="grow">Equal</div>
  <div class="grow">Equal</div>
  <div class="grow">Equal</div>
</div>

<!-- Logo never shrinks; nav items share remaining space -->
<header class="flex items-center gap-4">
  <img class="shrink-0 w-32" src="logo.svg" />
  <nav class="flex gap-4 shrink">...</nav>
  <button class="shrink-0">CTA</button>
</header>

<!-- Sidebar 1/4 + Main 3/4 layout -->
<div class="flex flex-wrap gap-4">
  <aside class="basis-1/4">Sidebar</aside>
  <main  class="basis-3/4">Content</main>
</div>

<!-- Three equal columns -->
<div class="flex flex-wrap gap-4">
  <div class="basis-1/3">Col 1</div>
  <div class="basis-1/3">Col 2</div>
  <div class="basis-1/3">Col 3</div>
</div>

<!-- Fixed sidebar + growing content -->
<div class="flex gap-4">
  <nav class="basis-64 shrink-0">Nav (16rem)</nav>
  <div class="grow">Main content</div>
</div>

<!-- Three equal-width columns from zero basis -->
<div class="flex gap-4">
  <div class="flex-1">Column</div>
  <div class="flex-1">Column</div>
  <div class="flex-1">Column</div>
</div>

<!-- Fixed avatar + growing text -->
<div class="flex items-center gap-3">
  <img class="flex-none w-10 h-10 rounded-full" src="..." />
  <div class="flex-1 min-w-0">
    <p class="truncate">Username</p>
  </div>
</div>

<!-- Nav: auto items share leftover space from natural size -->
<nav class="flex gap-2">
  <a class="flex-auto text-center">Home</a>
  <a class="flex-auto text-center">About</a>
  <a class="flex-auto text-center">Contact</a>
</nav>

<div class="flex justify-start gap-2">...</div>
<div class="flex justify-center gap-2">...</div>
<div class="flex justify-end gap-2">...</div>
<div class="flex justify-between">...</div>
<div class="flex justify-around">...</div>
<div class="flex justify-evenly">...</div>

<!-- Responsive -->
<div class="flex justify-center lg:justify-between">...</div>

<div class="flex justify-items-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex">
  <div>Default</div>
  <div class="justify-self-center">Centered</div>
  <div class="justify-self-end">End</div>
</div>

<!-- Must have flex-wrap + fixed height to see effect -->
<div class="flex flex-wrap content-start gap-2" style="height: 180px">
  <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

<div class="flex flex-wrap content-between gap-2" style="height: 180px">...</div>
<div class="flex flex-wrap content-center gap-2" style="height: 180px">...</div>

<!-- Vertically center items -->
<div class="flex items-center gap-4 h-24">
  <div>Short</div>
  <div class="h-16">Tall</div>
  <div class="h-8">Medium</div>
</div>

<!-- Baseline alignment for mixed font sizes -->
<div class="flex items-baseline gap-3">
  <span class="text-3xl font-bold">Big</span>
  <span class="text-sm">small text aligned by baseline</span>
</div>

<!-- Responsive -->
<div class="flex items-start md:items-center">...</div>

<!-- All items start, but middle one centers itself -->
<div class="flex items-start gap-4 h-32">
  <div>Top</div>
  <div class="self-center">Middle</div>
  <div class="self-end">Bottom</div>
  <div class="self-stretch">Full height</div>
</div>

<!-- Center all wrapped content both axes -->
<div class="flex flex-wrap place-content-center gap-3" style="height:200px">
  <div>A</div><div>B</div><div>C</div>
  <div>D</div><div>E</div>
</div>

<div class="flex place-items-center h-24">
  <div>Centered both ways</div>
</div>

<div class="flex h-32">
  <div class="place-self-start">Top-left</div>
  <div class="place-self-center">Center</div>
  <div class="place-self-end">Bottom-right</div>
</div>

<!-- DOM order: A B C D — Visual order: C A D B -->
<div class="flex gap-3">
  <div class="order-2">A (DOM 1st)</div>
  <div class="order-4">B (DOM 2nd)</div>
  <div class="order-1">C (DOM 3rd)</div>
  <div class="order-3">D (DOM 4th)</div>
</div>

<!-- Move sidebar before main on mobile -->
<div class="flex flex-col md:flex-row gap-4">
  <main class="order-2 md:order-1">Content (DOM first)</main>
  <aside class="order-1 md:order-2">Sidebar (DOM second, visually first on mobile)</aside>
</div>

<!-- Always first, regardless of position in DOM -->
<div class="order-first">Pinned to front</div>

<!-- Uniform gap -->
<div class="flex flex-wrap gap-4">
  <div>Item</div><div>Item</div><div>Item</div>
</div>

<!-- Different column and row gaps -->
<div class="flex flex-wrap gap-x-6 gap-y-2">
  <div>Item</div><div>Item</div><div>Item</div>
</div>

<!-- Classic two-pane layout: stacked on mobile, side-by-side on md+ -->
<div class="flex flex-col md:flex-row gap-6">
  <aside class="md:w-64 shrink-0">Sidebar</aside>
  <main class="flex-1 min-w-0">Content</main>
</div>

<!-- Center on mobile, space-between on lg+ -->
<nav class="flex justify-center lg:justify-between items-center">
  <div>Logo</div>
  <ul class="hidden lg:flex gap-8">...</ul>
  <button>CTA</button>
</nav>

<!-- Wrap on small, single row on xl+ -->
<div class="flex flex-wrap xl:flex-nowrap gap-4">
  <div class="basis-full sm:basis-1/2 xl:flex-1">Card</div>
  <div class="basis-full sm:basis-1/2 xl:flex-1">Card</div>
  <div class="basis-full sm:basis-1/2 xl:flex-1">Card</div>
  <div class="basis-full sm:basis-1/2 xl:flex-1">Card</div>
</div>

<!-- Reorder items responsively -->
<div class="flex flex-col md:flex-row gap-4">
  <main class="order-2 md:order-1">Main (DOM 1st)</main>
  <aside class="order-1 md:order-2">Sidebar (DOM 2nd, first on mobile)</aside>
</div>

@use "@mastors/flexer/scss/mixins/flex-container" as *;

// Basic horizontal centered container
.hero {
  @include flex-container($justify: center, $align: center);
}

// Card grid — wrapping row with gap
.card-grid {
  @include flex-container($wrap: wrap, $gap: 1.5rem);
}

// Vertical nav sidebar
.sidebar-nav {
  @include flex-container($direction: column, $align: flex-start, $gap: .5rem);
}

// Inline badge container
.chip-group {
  @include flex-container($align: center, $gap: .5rem, $inline: true);
}

// Full toolbar: space-between with centered cross axis
.toolbar {
  @include flex-container($justify: space-between, $align: center, $gap: 1rem);
  padding: .75rem 1.25rem;
  background: var(--mastors-surface);
}

@use "@mastors/flexer/scss/mixins/flex-item" as *;

// Fluid main content that grows from zero
.main-content {
  @include flex-item($grow: 1, $basis: 0%);
}

// Fixed-width sidebar — never grows or shrinks
.sidebar {
  @include flex-item($grow: 0, $shrink: 0, $basis: 280px);
}

// Card that starts at 300px but can shrink, centers itself
.card {
  @include flex-item($grow: 1, $basis: 300px, $align: center);
}

// Item with explicit visual order
.featured {
  @include flex-item($grow: 2, $order: 1);
}

@use "@mastors/flexer/scss/mixins/flex-center" as *;

// Perfect centering — modal overlay, hero, spinner wrapper
.overlay {
  @include flex-center;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
}

// Center content area horizontally, not vertically
.page-header {
  @include flex-center-x;
  padding: 2rem 1rem;
}

// Icon + label inline — vertically center only
.btn {
  @include flex-center-y($inline: true);
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: .375rem;
}

// Inline icon badge
.badge {
  @include flex-center($inline: true);
  gap: .35rem;
  padding: .2rem .5rem;
  border-radius: 9999px;
}

@use "@mastors/flexer/scss/generators/flex-generator" as gen;

// Emit only direction + justify + align with responsive variants
// Useful for a component library that just needs layout primitives
@include gen.generate-flex-utilities((
  direction:  true,
  justify:    true,
  align:      true,
  responsive: true,
));

// Emit everything including responsive variants
@include gen.generate-flex-utilities((
  direction:  true,
  wrap:       true,
  justify:    true,
  align:      true,
  grow:       true,
  shrink:     true,
  order:      true,
  responsive: true,
));

// Emit only grow/shrink — no responsive variants needed
@include gen.generate-flex-utilities((
  grow:   true,
  shrink: true,
));