Skip to main content

​
Overview

Control how flex items are aligned within a flex container. Use justify-content for horizontal alignment and align-items for vertical alignment.

​
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

​
Examples

​
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>

​
Header with Space Between

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

​
Vertical Center

<div class="flex items-center gap-4">
  <div class="w-12 h-12 bg-blue rounded-full"></div>
  <div>
    <h3 class="font-semibold">Title</h3>
    <p class="text-gray">Description</p>
  </div>
</div>

​
Individual Item Alignment

<div class="flex items-start gap-4">
  <div class="p-4 bg-blue text-white">Item 1</div>
  <div class="p-4 bg-blue text-white self-center">Centered Item</div>
  <div class="p-4 bg-blue text-white">Item 3</div>
</div>

​
Common Patterns

<nav class="flex items-center justify-between p-4 bg-white">
  <div class="flex items-center gap-4">
    <img src="logo.png" alt="Logo" class="h-8">
    <span class="text-xl font-bold">Brand</span>
  </div>
  <div class="flex items-center gap-6">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

​
Card with Icon

<div class="flex items-center gap-4 p-6 bg-white rounded-lg">
  <div class="w-12 h-12 bg-blue rounded-full flex items-center justify-center">
    <span class="text-white text-xl">✓</span>
  </div>
  <div class="flex-1">
    <h3 class="font-semibold mb-1">Card Title</h3>
    <p class="text-gray">Card description</p>
  </div>
</div>

​
Best Practices

  • Center content: Use items-center justify-center for centered layouts
  • Space between: Use justify-between for header navigation
  • Vertical alignment: Use items-center to vertically center items in a row
  • Individual control: Use self-* utilities to override container alignment

Direction

Control flex direction

Gap

Spacing between flex items

Flexbox Overview

Complete flexbox system overview