Skip to main content

​
Flexbox Direction

Control the direction of flex items.

Flex Direction

.flex-rowRowflex-direction: row;Horizontal layout
.flex-colColumnflex-direction: column;Vertical layout

​
Flexbox Wrap

Control how flex items wrap.

Flex Wrap

.flex-wrapWrapflex-wrap: wrap;Allow wrapping
.flex-nowrapNo wrapflex-wrap: nowrap;Prevent wrapping

​
Justify Content

Control horizontal alignment of flex items.

Justify Content

.justify-startStartjustify-content: start;Align to start
.justify-centerCenterjustify-content: center;Center alignment
.justify-endEndjustify-content: end;Align to end
.justify-betweenSpace betweenjustify-content: space-between;Space between items

​
Align Items

Control vertical alignment of flex items.

Align Items

.items-startStartalign-items: start;Align to start
.items-centerCenteralign-items: center;Center alignment
.items-endEndalign-items: end;Align to end
.items-stretchStretchalign-items: stretch;Stretch to fill

​
Align Self

Control individual item alignment.

Align Self

.self-centerCenteralign-self: center;Center this item
.self-startStartalign-self: start;Align to start
.self-endEndalign-self: end;Align to end

​
Gap

Control spacing between flex items.

Gap Properties

.gap-14pxgap: 4px;Small gap
.gap-28pxgap: 8px;Small gap
.gap-312pxgap: 12px;Medium gap
.gap-416pxgap: 16px;Standard gap
.gap-624pxgap: 24px;Large gap
.gap-832pxgap: 32px;Extra large gap

​
Common Flexbox Patterns

​
Header Layout

<header class="flex items-center justify-between p-6 bg-white">
  <h1 class="text-2xl font-700">Logo</h1>
  <nav class="flex gap-6">
    <a href="#" class="text-gray">Home</a>
    <a href="#" class="text-gray">About</a>
  </nav>
</header>

​
Centered Content

<div class="flex items-center justify-center min-h-screen">
  <div class="text-center">
    <h1 class="text-4xl font-700 mb-4">Welcome</h1>
    <button class="btn btn-blue">Get Started</button>
  </div>
</div>

​
Card Grid

<div class="flex flex-wrap gap-6">
  <div class="w-1-3">
    <div class="card p-6">Card 1</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 2</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 3</div>
  </div>
</div>

Layout

Display utilities for flexbox

Spacing

Margin and padding utilities