CSS Flexbox Tutorial for Beginners with Examples (2026)

This CSS Flexbox tutorial will help you learn modern layout techniques step by step with practical examples.

If you’ve ever struggled with aligning elements in CSS, you’re not alone. For years, developers used hacks like floats and positioning just to create simple layouts.

Then came Flexbox — and it changed everything.

In this guide, you’ll learn CSS Flexbox from scratch, with practical examples you can actually use in real projects.

Why Learn CSS Flexbox Tutorial?

CSS Flexbox is one of the easiest ways to create responsive layouts in modern web design.

What is CSS Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout system that helps you:

Align items easily
Create responsive layouts
Control spacing and distribution

Instead of struggling with complex layouts, Flexbox gives you a simple and powerful way to design UI.

How to Use Flexbox

To start using Flexbox, you only need one line:

.container {
display: flex;
}

.container {

display: flex;

}

That’s it. Now all child elements become flex items.

Basic Example

<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

</div>

.container {
display: flex;
gap: 10px;
}

.container {

display: flex;

gap: 10px;

}

Result: Items will appear in a row automatically.

Flexbox Direction

Control how items are arranged:

.container {
display: flex;
flex-direction: row; /* default */
}

.container {

display: flex;

flex-direction: row; /* default */

}

Options:

row → horizontal
column → vertical
row-reverse
column-reverse

Align Items (Vertical Alignment)

.container {
display: flex;
align-items: center;
}
<pre>
Options:
<ul>
<li><code>flex-start</code></li>
<li><code>center</code></li>
<li><code>flex-end</code></li>
<li><code>stretch</code></li>
</ul>
<h2>Justify Content (Horizontal Alignment)</h2>
<pre class="lang:css">
.container {
display: flex;
justify-content: center;
}

.container {

display: flex;

align-items: center;

}

<pre>

Options:

<ul>

<li><code>flex-start</code></li>

<li><code>center</code></li>

<li><code>stretch</code></li>

</ul>

<h2>Justify Content (Horizontal Alignment)</h2>

.container {

display: flex;

justify-content: center;

}

Options:

flex-start
center
flex-end
space-between
space-around
space-evenly

Center a Div (Most Popular Use Case)

This is one of the most searched CSS problems.

.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

This perfectly centers content both vertically and horizontally.

Flex Wrap (Responsive Layout)

.container {
display: flex;
flex-wrap: wrap;
}

.container {

display: flex;

flex-wrap: wrap;

}

This allows items to move to the next line on smaller screens.

Gap Between Items

.container {
display: flex;
gap: 20px;
}

.container {

display: flex;

gap: 20px;

}

Cleaner than using margins.

Flex Grow, Shrink, and Basis

These control how items resize.

.item {
flex: 1;
}

.item {

flex: 1;

}

This means all items will take equal space.

Example:

.item1 { flex: 1; }
.item2 { flex: 2; }

1 2	.item1 { flex: 1; } .item2 { flex: 2; }

Item 2 will be twice as wide.

Practical Example: Responsive Navbar

<nav class="navbar">
<div>Logo</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</nav>

<a href="#">About</a>

<a href="#">Contact</a>

</div>

</nav>

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu {
display: flex;
gap: 20px;
}

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

}

.menu {

display: flex;

gap: 20px;

}

Practical Example: Card Layout

.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 200px;
}

.container {

display: flex;

flex-wrap: wrap;

gap: 20px;

}

.card {

flex: 1 1 200px;

}

This creates a responsive grid-like layout.

Common Flexbox Mistakes

1. Not Setting Height

Vertical alignment won’t work without height.

2. Mixing Up align-items and justify-content

justify-content → main axis
align-items → cross axis

3. Forgetting flex-wrap

Without it, layout may break on mobile.

Flexbox vs Grid (Quick Comparison)

Feature	Flexbox	Grid
Layout type	1D	2D
Best for	Rows or columns	Full layouts
Ease of use	Easy	Medium

Use:

Flexbox → Components
Grid → Full page layout

When to Use Flexbox

Use Flexbox when you need:

Navbar
Buttons alignment
Cards layout
Centering elements
Small UI components

Final Thoughts

Flexbox is one of the most important CSS tools every developer should know.

Once you understand:

Direction
Alignment
Spacing

You can build almost any layout easily.

Frequently Asked Questions (FAQ)

Is Flexbox good for responsive design?

Yes. Flexbox is perfect for building responsive layouts.

Can I use Flexbox and Grid together?

Yes. Many modern websites use both.

Is Flexbox still relevant in 2026?

Absolutely. It is widely used in modern web development.

CSS Tutorial

CSS Flexbox Tutorial for Beginners with Examples (2026)

Why Learn CSS Flexbox Tutorial?

What is CSS Flexbox?

How to Use Flexbox

Basic Example

Flexbox Direction

Align Items (Vertical Alignment)

Center a Div (Most Popular Use Case)

Flex Wrap (Responsive Layout)

Gap Between Items

Flex Grow, Shrink, and Basis

Practical Example: Responsive Navbar

Practical Example: Card Layout

Common Flexbox Mistakes

1. Not Setting Height

2. Mixing Up align-items and justify-content

3. Forgetting flex-wrap

Flexbox vs Grid (Quick Comparison)

When to Use Flexbox

Final Thoughts

Frequently Asked Questions (FAQ)

Is Flexbox good for responsive design?

Can I use Flexbox and Grid together?

Is Flexbox still relevant in 2026?

Related Posts:

Leave a comment

Cancel reply