Direction
- Control row and column layout directions in flex.
Flexbox Direction: The Axis Concept
Before utilities, you must understand axes.
In Tailwind CSS, Flexbox works around two axes:
Main Axis → direction items flow
Cross Axis → perpendicular to main axis
When direction changes, alignment meaning changes.
Flex Direction
What Is Flex Direction ?
Flex direction defines how flex items are arranged.
Syntax:
flex-{direction}
Available Flex Direction Utilities
Class Direction flex-row Horizontal (default) flex-row-reverse Horizontal (reversed) flex-col Vertical flex-col-reverse Vertical (reversed)
Flex Row Layout
flex-row arranges flex items horizontally from left to right (default flex direction).
<div class="flex flex-row gap-4">
<div class="p-4 bg-blue-200">Item 1</div>
<div class="p-4 bg-green-200">Item 2</div>
</div>Result:
Items flow left → right
Flex Column Layout
flex-col stacks flex items vertically from top to bottom.
<div class="flex flex-col gap-4">
<div class="p-4 bg-blue-200">Item 1</div>
<div class="p-4 bg-green-200">Item 2</div>
</div>Result:
Items stack top → bottom
Common for:
Forms
Sidebars
Mobile layouts
Justify Content
What is Justify Content ?
justify-* controls alignment along the main axis
(Main axis = direction of flex-row or flex-col)Syntax:
justify-{value}
Common Justify Utilities
Class Effect justify-start Align to start justify-center Center justify-end Align to end justify-between Space between items justify-around Space around items justify-evenly Equal spacing
Flex Justify Between
justify-between places items at the start and end of the container with space between them.
<div class="flex justify-between bg-gray-100 p-4">
<span>Logo</span>
<span>Menu</span>
</div>Used in:
Navbars
Headers
Toolbars
Vertical Centering with Flex
flex-col stacks items vertically and justify-center centers them along the vertical axis.
<div class="flex flex-col justify-center h-64 bg-gray-100">
<p>Centered vertically</p>
</div>Here:
Main axis = vertical
Justify controls vertical alignment
Align Items
What is Align Items ?
items-* controls alignment on the cross axis
(Cross axis = perpendicular to main axis)Syntax:
items-{value}
Common Align Items Utilities
Class Effect items-start Align to start items-center Center items-end Align to end items-stretch Stretch (default)
Align Items Center
items-center vertically aligns flex items to the center inside the container.
<div class="flex items-center h-20 bg-gray-100">
<span class="bg-blue-200 p-2">Icon</span>
<span class="bg-green-200 p-2">Text</span>
</div>Result:
Items vertically centered
Used heavily in:
Buttons with icons
Navbars
Lists
Align Items Center in Column
flex-col stacks items vertically and items-center horizontally centers them in the container.
<div class="flex flex-col items-center bg-gray-100 p-4">
<div>Item 1</div>
<div>Item 2</div>
</div>Here:
Cross axis = horizontal
Items centered horizontally
Justify vs Align
Property Axis Controlled justify-* Main axis items-* Cross axis Rule:
Change direction → axes swap roles.
This is the #1 Flexbox confusion point.
Flex Wrap
What Is Flex Wrap ?
By default, Flexbox does not wrap items.
flex-wrap allows items to move to the next line.
Syntax:
flex-wrap
flex-nowrap
Flex Wrap Layout
flex-wrap allows flex items to move to the next line when there is not enough space.
<div class="flex flex-wrap gap-4">
<div class="w-40 bg-blue-200 p-4">Box</div>
<div class="w-40 bg-green-200 p-4">Box</div>
<div class="w-40 bg-red-200 p-4">Box</div>
<div class="w-40 bg-yellow-200 p-4">Box</div>
</div>Result:
Items wrap to next row when space ends
Used in:
Card grids
Tags
Image galleries
Flex No Wrap Layout
flex-nowrap keeps all flex items on one line, and overflow-x-auto allows horizontal scrolling if needed.
<div class="flex flex-nowrap overflow-x-auto">
<!-- horizontal scroll layout -->
</div>Used for:
Horizontal sliders
Scrollable menus
Combined Flex Layout
Combines flex-wrap, justify-center, and items-center to create a responsive centered card layout.
<div class="flex flex-wrap justify-center items-center gap-6 p-6">
<div class="w-40 h-24 bg-white shadow">Card</div>
<div class="w-40 h-24 bg-white shadow">Card</div>
<div class="w-40 h-24 bg-white shadow">Card</div>
</div>- This is production-level layout code.
Responsive Flex Direction
flex-col stacks items vertically on small screens, and md:flex-row switches to a horizontal layout on medium screens.
<div class="flex flex-col md:flex-row gap-4">
<div>Sidebar</div>
<div>Main Content</div>
</div>Meaning:
Mobile → vertical
Desktop → horizontal
This is a common responsive pattern.
Common Mistakes
Forgetting flex on parent
Mixing up justify vs align
Not understanding axis change
Forgetting flex-wrap
Overusing margins instead of flex alignment
Flexbox works perfectly when you think in axes.
Best Practices for Flexbox in Tailwind
Decide direction first
Align main axis with justify-*
Align cross axis with items-*
Use gap-* instead of margins
Add wrap only when needed
Test responsiveness early