Axis Twelve Flexbox

Build faster, center easier. The 12-column solution.

Basic Flex Layouts

Simple Row (Default)

Simple Row (Default)

Item 1
Item 2
Item 3

Column Layout

Item 1
Item 2
Item 3

Flex with Fixed Width Items

100px
Flexible
150px
<div class="flex items-center gap-md"> <div class="flex-none p-md">Fixed</div> <div class="flex-item p-md">Fluid</div> <div class="flex-item p-md">Fluid</div> </div>

Justify Content (Horizontal Alignment)

Justify Start (Default)

Item
Item

Justify Center

Item
Item

Justify End

Item
Item

Justify Between

Left
Right

Justify Around

Item
Item
Item

Justify Evenly

Item
Item
Item
<div class="flex justify-center gap-md"> <div>Centered Items</div> </div>

Align Items (Vertical Alignment)

Align Start

Item 1
Item 2
Item 3

Align Center

Item 1
Item 2
Item 3

Align End

Item 1
Item 2
Item 3

Align Stretch

Item 1
Item 2
Item 3
<div class="flex items-center gap-md"> <div>Vertically Centered</div> </div>

Combined Alignments

Center Both Directions

Perfectly Centered

Space Between with Vertical Center

Left
Center
Right

Navigation Bar Pattern

Logo
Home
About
Contact
User
<div class="flex justify-between items-center"> <div>Logo</div> <div>Menu</div> <div>User</div> </div>

Flex Wrapping & Gaps

Flex Wrap with Gap

Item 1
Item 2
Item 3
Item 4
Item 5

Gap Utilities

gap-sm - Small gap

Item
Item
Item

gap-md - Medium gap

Item
Item
Item

gap-lg - Large gap

Item
Item
Item

Practical Examples

Card List

Card 1
Card content here
Card 2
Card content here
Card 3
Card content here

Button Group

<div class="flex gap-sm"> <button>Primary</button> <button>Secondary</button> </div>