Enabling Flex and Direction
Activate flexbox with flex, choose row or column layout with flex-row and flex-col, and understand the flex container model.
Enabling Flex and Direction is a free Tailwind CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Flexbox?
Flexbox is a CSS layout model designed for arranging items in a single dimension — either a row or a column. It excels at distributing space among items, aligning them along axes, and handling flexible item sizes. Before Flexbox, horizontal centering and equal-height columns required CSS tricks; Flexbox makes these trivial. Tailwind exposes the entire Flexbox API through utility classes.
Enabling Flex With the flex Class
Apply flex to any element to make it a flex container. Its direct children become flex items that participate in the flex layout. By default, flex items line up in a row (left to right) and stretch to fill the container's height. Everything about how the children arrange themselves is controlled by utilities applied to the parent container.
<!-- Without flex: items stack vertically as blocks -->
<div>
<div class="bg-blue-200 p-4">Item 1</div>
<div class="bg-blue-300 p-4">Item 2</div>
</div>
<!-- With flex: items align in a row -->
<div class="flex">
<div class="bg-blue-200 p-4">Item 1</div>
<div class="bg-blue-300 p-4">Item 2</div>
</div>inline-flex for Inline Containers
inline-flex creates a flex container that behaves like an inline element — it does not take up a full line width. This is useful for icon-with-label components, button groups, and tags that need to align their internal content with flexbox while still flowing inline with surrounding text or other inline elements.
<!-- inline-flex: the button is inline but content aligns with flex -->
<p class="text-gray-700">
Click the
<button class="inline-flex items-center gap-1 bg-indigo-100 text-indigo-700 px-2 py-1 rounded font-medium text-sm">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"/></svg>
Add Item
</button>
button to continue.
</p>Flex Row Direction
flex-row is the default direction — items flow left to right (in LTR layouts). You rarely need to write it explicitly, but it is useful when resetting a flex-col applied at a smaller breakpoint. The main axis runs horizontally (left to right), and the cross axis runs vertically (top to bottom) in row direction.
<!-- Explicit row direction (same as default) -->
<div class="flex flex-col md:flex-row gap-4">
<div class="bg-indigo-100 p-4 rounded flex-1">Stacks vertically on mobile</div>
<div class="bg-indigo-200 p-4 rounded flex-1">Aligns horizontally on desktop</div>
</div>Flex Column Direction
flex-col makes the main axis run vertically — items stack from top to bottom like normal block elements, but now they participate in flexbox alignment and size distribution. This is the foundation for sidebars, card layouts, and any design where vertical stacking needs the power of flexbox alignment utilities like items-center or justify-between.
<!-- Vertical sidebar layout -->
<aside class="flex flex-col h-screen bg-gray-900 text-white w-64">
<div class="p-6 border-b border-gray-700">
<span class="text-xl font-bold">Logo</span>
</div>
<nav class="flex-1 p-4 space-y-1">
<a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-800">Dashboard</a>
<a href="#" class="block px-3 py-2 rounded-lg hover:bg-gray-800">Settings</a>
</nav>
<div class="p-4 border-t border-gray-700">
<span class="text-sm text-gray-400">User Profile</span>
</div>
</aside>Reversed Directions
flex-row-reverse and flex-col-reverse flip the visual order of flex items without changing the HTML source order. This is useful for RTL support and for certain layout patterns where the visual and DOM order need to differ. Note that only the visual order changes — keyboard navigation and screen reader order still follow the DOM order.
<!-- Reverse row: icons appear on the right of their labels -->
<div class="flex flex-row-reverse items-center gap-2">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12l-6-6h12l-6 6z"/>
</svg>
<span class="text-gray-700">Sort by Date</span>
</div>The Flex Container Model
Understanding the flex container model is key to mastering Tailwind layout. The main axis is the primary direction (row = horizontal, column = vertical). The cross axis is perpendicular to it. justify-* controls alignment along the main axis; items-* controls alignment along the cross axis. All flex utilities you will learn next operate within this two-axis model.
/* Flex row:
Main axis: horizontal (left → right)
Cross axis: vertical (top → bottom)
justify-*: controls left/right positioning
items-*: controls top/bottom positioning
Flex column:
Main axis: vertical (top → bottom)
Cross axis: horizontal (left → right)
justify-*: controls top/bottom positioning
items-*: controls left/right positioning
*/A Practical Navbar in Flex Row
The navbar is the quintessential flex row layout. A container with flex items-center aligns everything vertically centered on the cross axis. justify-between pushes the logo to the left and the nav links to the right. Each of these layout properties is applied to the parent container, controlling all children simultaneously.
<header class="flex items-center justify-between px-8 py-4 bg-white shadow">
<span class="text-xl font-bold text-indigo-600">Brand</span>
<nav class="flex items-center gap-6">
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Products</a>
<a href="#" class="text-sm text-gray-600 hover:text-gray-900">Pricing</a>
<a href="#" class="text-sm bg-indigo-600 text-white px-4 py-2 rounded-lg">Get Started</a>
</nav>
</header>Centering With Flex
Perfect centering — both horizontally and vertically — is trivially easy with flexbox: apply flex items-center justify-center to the container. This works regardless of the container's size and the content's size, without knowing any dimensions in advance. This pattern is used for loading spinners, empty state illustrations, modal dialogs, and full-page landing sections.
<!-- Perfect centering: horizontal and vertical -->
<div class="min-h-screen flex items-center justify-center bg-gray-50">
<div class="bg-white rounded-2xl shadow-lg p-12 text-center">
<h1 class="text-3xl font-bold text-gray-900">Perfectly Centered</h1>
<p class="text-gray-500 mt-2">No margin math required.</p>
</div>
</div>Flex With Responsive Direction
A very common pattern is stacking elements vertically on mobile and placing them side by side on desktop. Use flex flex-col md:flex-row: items stack on mobile, and at the md breakpoint they switch to a horizontal row. This single class change handles the entire responsive layout behavior without any media query CSS.
<!-- Feature section: stack on mobile, row on desktop -->
<section class="flex flex-col md:flex-row gap-8 px-6 py-16">
<div class="flex-1 bg-indigo-50 rounded-xl p-8">
<h3 class="font-bold text-xl mb-2">Feature One</h3>
<p class="text-gray-600">Description of feature one.</p>
</div>
<div class="flex-1 bg-pink-50 rounded-xl p-8">
<h3 class="font-bold text-xl mb-2">Feature Two</h3>
<p class="text-gray-600">Description of feature two.</p>
</div>
</section>Nested Flex Containers
Flex containers can be nested. An outer flex flex-col manages the page layout (header, main, footer), while inner flex containers manage component layouts (navbar items, card contents). Each flex context is independent — the inner flex container's utilities do not affect the outer one. Nesting flexboxes is the normal pattern for complex real-world UI layouts.
<div class="flex flex-col min-h-screen">
<header class="flex items-center justify-between px-8 py-4 bg-white border-b">
<span class="font-bold">Logo</span>
<nav class="flex gap-4">
<a href="#" class="text-sm">Home</a>
</nav>
</header>
<main class="flex-1 flex items-center justify-center">
<p class="text-gray-600">Main content</p>
</main>
<footer class="bg-gray-800 text-white text-center py-6">
Footer
</footer>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: flex creates a flex container where children become flex items, flex-row and flex-col set the main axis direction, and flex items-center justify-center achieves perfect centering without knowing dimensions. Next up we position children along the main and cross axes with justify and items utilities.
Frequently asked questions
Is the “Enabling Flex and Direction” lesson free?
Yes — the full text of “Enabling Flex and Direction” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Enabling Flex and Direction”?
Activate flexbox with flex, choose row or column layout with flex-row and flex-col, and understand the flex container model. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Enabling Flex and Direction” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Enabling Flex and Direction
- Justify Content and Align Items
- Flex Grow, Shrink, and Basis
- Wrapping and Gap