Flexbox Architecture: Justify, Align, Direction, Wrap & Gap0%
Flexbox Architecture: Justify, Align, Direction, Wrap & Gap
Beginner12 min read•Updated: Jul 11, 2026
Flexbox Architecture: Justify, Align, Direction, Wrap & Gap
Modern web navigation bars, card lists, button groups, and modal layouts rely heavily on CSS Flexbox. Tailwind CSS transforms Flexbox into a concise, declarative toolkit that eliminates cumbersome flex container boilerplate.
1. Initializing a Flex Container
To activate flex layout, apply the flex utility to a container:
HTML
<div class="flex items-center justify-between p-4 bg-white shadow-sm">
<div class="font-bold text-lg text-primary">MSK Institute</div>
<nav class="flex items-center gap-6">
<a href="/courses" class="text-slate-600 hover:text-primary">Courses</a>
<a href="/tutorials" class="text-slate-600 hover:text-primary">Tutorials</a>
<button class="px-4 py-2 bg-secondary text-white rounded-lg">Enroll</button>
</nav>
</div>
2. Direction & Wrapping
| Class | CSS Equivalent | Description |
|---|---|---|
flex-row | flex-direction: row; | Default horizontal layout (left to right) |
flex-col | flex-direction: column; | Vertical layout (top to bottom) |
flex-row-reverse | flex-direction: row-reverse; | Reverse horizontal order |
flex-wrap | flex-wrap: wrap; | Allows items to wrap onto next line when full |
flex-nowrap | flex-wrap: nowrap; | Forces all items onto a single overflowing row |
3. Main-Axis (justify) vs Cross-Axis (items) Alignment
HTML
<!-- Justify content along main axis -->
<div class="flex justify-start">Align Left</div>
<div class="flex justify-center">Center along main axis</div>
<div class="flex justify-between">Space evenly with first/last at edges</div>
<div class="flex justify-evenly">Equal spacing around all items</div>
<!-- Align items along cross axis -->
<div class="flex items-center">Center items vertically in row</div>
<div class="flex items-start">Align to top edge</div>
<div class="flex items-end">Align to bottom edge</div>
<div class="flex items-baseline">Align by text baseline</div>
4. Spacing Items with gap
Never use manual mr-4 on flex children; use the container gap utility:
HTML
<div class="flex gap-4">
<!-- Equal 16px space between items, zero space on outer edges! -->
<div class="p-4 bg-slate-100 rounded">Item 1</div>
<div class="p-4 bg-slate-100 rounded">Item 2</div>
<div class="p-4 bg-slate-100 rounded">Item 3</div>
</div>
5. Flex Child Sizing: flex-1, grow, and shrink-0
HTML
<div class="flex items-center gap-3">
<!-- Avatar never shrinks even if screen shrinks -->
<img src="/avatar.jpg" class="w-12 h-12 rounded-full shrink-0" alt="User">
<!-- Content expands to fill all remaining horizontal width -->
<div class="flex-1 min-w-0">
<h5 class="font-bold truncate">Er. Sumit Kumar</h5>
<p class="text-xs text-slate-500 truncate">Lead Instructor at MSK</p>
</div>
<!-- Action button remains at native width -->
<button class="shrink-0 px-3 py-1 bg-blue-500 text-white rounded">Follow</button>
</div>
Interactive Quiz
Multiple Choice Questions
Question 1
Which Tailwind class combination horizontally and vertically centers a single child element inside a flex container?
Question 2
Why is using
gap-4 on a parent flex container preferred over applying mr-4 to each flex child?Question 3
What does the
shrink-0 utility class do when applied to a flex child?Question 4
Which class switches a horizontal flex layout into a vertical stack?
Question 5
What is the effect of
flex-1 on a child element?Next Lesson
CSS Grid System: Template Columns, Rows, Col-Span & Gap
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.