Flexbox Utilities

Flex Display

Enable flexbox layout:

<!-- Enable flex display -->
<div class="bismillah-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Inline flex -->
<div class="bismillah-inline-flex">
  <span>Item 1</span>
  <span>Item 2</span>
</div>

Flex Direction

Control the direction of flex items:

<!-- Row (left to right) - default -->
<div class="bismillah-flex bismillah-flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Column (top to bottom) -->
<div class="bismillah-flex bismillah-flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Row reverse (right to left) -->
<div class="bismillah-flex bismillah-flex-row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Column reverse (bottom to top) -->
<div class="bismillah-flex bismillah-flex-col-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Justify Content

Align flex items along the main axis:

<!-- Start (left/top) -->
<div class="bismillah-flex bismillah-justify-start">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Center -->
<div class="bismillah-flex bismillah-justify-center">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- End (right/bottom) -->
<div class="bismillah-flex bismillah-justify-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Space between -->
<div class="bismillah-flex bismillah-justify-between">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Space around -->
<div class="bismillah-flex bismillah-justify-around">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Space evenly -->
<div class="bismillah-flex bismillah-justify-evenly">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Align Items

Align flex items along the cross axis:

<!-- Stretch (default) -->
<div class="bismillah-flex bismillah-items-stretch">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Start (top) -->
<div class="bismillah-flex bismillah-items-start">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Center (vertically centered) -->
<div class="bismillah-flex bismillah-items-center bismillah-h-32">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- End (bottom) -->
<div class="bismillah-flex bismillah-items-end">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Baseline -->
<div class="bismillah-flex bismillah-items-baseline">
  <div class="bismillah-text-3xl">Item 1</div>
  <div class="bismillah-text-sm">Item 2</div>
</div>

Flex Wrap

Control wrapping of flex items:

<!-- No wrap (items compress) -->
<div class="bismillah-flex bismillah-flex-nowrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Wrap (items move to next line) -->
<div class="bismillah-flex bismillah-flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Wrap reverse -->
<div class="bismillah-flex bismillah-flex-wrap-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Grow & Shrink

Control how items grow or shrink:

<!-- Grow to fill available space -->
<div class="bismillah-flex">
  <div class="bismillah-flex-grow">Grows</div>
  <div>Fixed</div>
</div>

<!-- Shrink proportionally -->
<div class="bismillah-flex">
  <div class="bismillah-flex-shrink">Shrinks</div>
  <div>Fixed</div>
</div>

<!-- Don't grow or shrink -->
<div class="bismillah-flex">
  <div class="bismillah-flex-none">Fixed size</div>
  <div>Grows</div>
</div>

<!-- Flex-1 (grow and shrink) -->
<div class="bismillah-flex">
  <div class="bismillah-flex-1">Equal width</div>
  <div class="bismillah-flex-1">Equal width</div>
  <div class="bismillah-flex-1">Equal width</div>
</div>

Align Content

Align wrapped flex lines (when flex-wrap is active):

<!-- Start -->
<div class="bismillah-flex bismillah-flex-wrap bismillah-content-start bismillah-h-64">
  <!-- Items align to start -->
</div>

<!-- Center -->
<div class="bismillah-flex bismillah-flex-wrap bismillah-content-center bismillah-h-64">
  <!-- Items centered -->
</div>

<!-- Between -->
<div class="bismillah-flex bismillah-flex-wrap bismillah-content-between bismillah-h-64">
  <!-- Items spaced with gap between -->
</div>

Gap

Add spacing between flex items:

<!-- Gap between items -->
<div class="bismillah-flex bismillah-gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Horizontal gap only -->
<div class="bismillah-flex bismillah-gap-x-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Vertical gap only (for flex-col) -->
<div class="bismillah-flex bismillah-flex-col bismillah-gap-y-2">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Common Patterns

<nav class="bismillah-flex bismillah-items-center bismillah-justify-between bismillah-px-4 bismillah-py-3 bismillah-bg-gray-800 bismillah-text-white">
  <div class="bismillah-text-xl bismillah-font-bold">Logo</div>
  <div class="bismillah-flex bismillah-gap-6">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

<div class="bismillah-flex bismillah-items-center bismillah-justify-center bismillah-min-h-screen bismillah-bg-gray-100">
  <div class="bismillah-text-center">
    <h1 class="bismillah-text-5xl bismillah-font-bold bismillah-mb-4">Welcome</h1>
    <p class="bismillah-text-gray-600">Start building today</p>
  </div>
</div>

<div class="bismillah-flex bismillah-gaps-0">
  <aside class="bismillah-w-64 bismillah-bg-gray-100 bismillah-flex-none">
    Sidebar
  </aside>
  <main class="bismillah-flex-1 bismillah-p-6">
    Main content
  </main>
</div>

<div class="bismillah-flex bismillah-flex-wrap bismillah-gap-4">
  <div class="bismillah-flex-1 bismillah-min-w-xs bismillah-bg-white bismillah-p-4 bismillah-rounded-lg bismillah-shadow">
    Card 1
  </div>
  <div class="bismillah-flex-1 bismillah-min-w-xs bismillah-bg-white bismillah-p-4 bismillah-rounded-lg bismillah-shadow">
    Card 2
  </div>
  <div class="bismillah-flex-1 bismillah-min-w-xs bismillah-bg-white bismillah-p-4 bismillah-rounded-lg bismillah-shadow">
    Card 3
  </div>
</div>

<div class="bismillah-flex bismillah-gap-2">
  <button class="bismillah-px-4 bismillah-py-2 bismillah-bg-blue-600 bismillah-text-white bismillah-rounded">Save</button>
  <button class="bismillah-px-4 bismillah-py-2 bismillah-bg-gray-300 bismillah-rounded">Cancel</button>
</div>

<!-- Items at far sides -->
<div class="bismillah-flex bismillah-justify-between bismillah-items-center">
  <div>Left content</div>
  <div>Right content</div>
</div>

Quick Reference