Skip to main content
CSS for Beginners
CHAPTER 07 Beginner

CSS Flexbox Complete Guide

Updated: May 10, 2026
5 min read

# CSS Flexbox Complete Guide

1. Introduction

Flexbox (Flexible Box Layout) was a revolution in web design. It is a one-dimensional layout model designed to lay out items in rows or columns, and distribute space dynamically. If you want to align things perfectly, Flexbox is the answer.

2. Learning Objectives

  • Create a flex container with display: flex.
  • Align items horizontally with justify-content.
  • Align items vertically with align-items.
  • Handle wrapping and spacing with gap.

3. Detailed Explanations

Activating Flexbox

You apply display: flex to the parent container. All direct children instantly become "flex items" and will sit side-by-side in a row by default.
css
123 
.container {
    display: flex;
}

Flex Direction

You can change whether items flow in a row or a column.
css
1234 
.container {
    display: flex;
    flex-direction: column; /* Items stack vertically */
}

Justify Content (Main Axis Alignment)

If flex-direction is row, justify-content aligns items horizontally. Values: flex-start, center, flex-end, space-between, space-around.
css
123456789 
.nav-bar {
    display: flex;
    justify-content: space-between; /* Pushes first item left, last item right */
}

.center-box {
    display: flex;
    justify-content: center; /* Centers horizontally */
}

Align Items (Cross Axis Alignment)

If flex-direction is row, align-items aligns items vertically. Values: flex-start, center, flex-end, stretch.
css
1234 
.vertical-center {
    display: flex;
    align-items: center; /* Centers vertically */
}

The Ultimate Centering Trick

Centering a div used to be the hardest thing in CSS. With Flexbox, it's 3 lines:
css
123456 
.perfect-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full screen height */
}

Gap and Wrapping

Use gap to put space between items without dealing with margins. Use flex-wrap to allow items to flow to the next line if they run out of space.
css
12345 
.grid-container {
    display: flex;
    flex-wrap: wrap; /* Wraps to next line */
    gap: 20px; /* 20px between all items */
}

4. Mini Project: Perfect Card Layout

html
12345 
<div class="card-list">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>
css
12345678910111213141516 
.card-list {
    display: flex;
    justify-content: space-between; /* Evenly spaced */
    gap: 30px; /* Prevents cards from touching on small screens */
    padding: 40px;
    background: #f8fafc;
}

.card {
    flex: 1; /* Tells all cards to take up equal width */
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    text-align: center;
}

5. MCQs

Q1: Which property aligns items along the MAIN axis (horizontally in a row)? A) align-items B) justify-content C) align-content D) flex-wrap *Answer: B*

6. Summary

Flexbox is arguably the most used layout tool in modern CSS. Use it for navigation bars, aligning icons with text, centering content, and building responsive card layouts.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter CSS Display, Positioning, and Layout Basics
Next Chapter CSS Grid Complete Guide

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1