CSS Flexbox

· CSS3 Module

Introduction to Flexbox

Before Flexbox came into CSS, making layouts was difficult. Developers used floats, tables, and complicated positioning tricks. Pages often broke on different screen sizes.

Then came Flexbox.

Flexbox means Flexible Box Layout.
It is a modern CSS layout system used to arrange items in a row or column easily.

Think of Flexbox like arranging books on a shelf.

  • You can place them in a row
  • Move them to center
  • Add space between them
  • Align them perfectly
  • Change direction anytime

Flexbox is mainly used for one-dimensional layouts.

That means:

  • either arranging items horizontally
  • or arranging items vertically

Why Flexbox is Important

Without Flexbox:

  • Alignment was difficult
  • Centering elements was painful
  • Responsive layouts required too much code

With Flexbox:

  • Layout becomes simple
  • Responsive design becomes easier
  • Items adjust automatically

Real Life Example

Imagine a restaurant table.

  • The table = Flex Container
  • Plates, glasses, spoons = Flex Items

You can:

  • arrange them in a row
  • place them in a column
  • keep equal space
  • center everything

That is exactly what Flexbox does on websites.

Basic Syntax of Flexbox

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

.container{
    display:flex;
}

As soon as we write:

display:flex;

The container becomes a Flex Container.

All child elements become Flex Items automatically.

Flex Container

A Flex Container is the parent element that controls layout behavior.

.container{
    display:flex;
}

Now .container controls:

  • direction
  • alignment
  • spacing
  • positioning

Example

<div class="container">
    <div>Apple</div>
    <div>Mango</div>
    <div>Banana</div>
</div>

.container{
    display:flex;
    border:2px solid black;
}

Output

Normally divs appear one below another.

But Flexbox changes them into a horizontal row.

Flex Items

All direct children inside a flex container are called Flex Items.

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

Here:

  • container = flex container
  • item = flex items

Flex items automatically become flexible.

Flex Direction

flex-direction decides the direction of items.

1. Row (Default)

.container{
    display:flex;
    flex-direction:row;
}

Items appear left to right.

Example

1  2  3

2. Column

.container{
    display:flex;
    flex-direction:column;
}

Items appear top to bottom.

Example

1
2
3

3. Row Reverse

flex-direction:row-reverse;

Output:

3  2  1

4. Column Reverse

flex-direction:column-reverse;

Output:

3
2
1

Real Example

Imagine a mobile app menu.

For desktop:

flex-direction:row;

For mobile:

flex-direction:column;

This makes websites responsive.

Justify Content

justify-content controls alignment on the main axis.

If direction is row:

  • main axis = horizontal

If direction is column:

  • main axis = vertical

Types of justify-content

1. Flex Start

justify-content:flex-start;

Items start from beginning.

1 2 3

2. Center

justify-content:center;

Items move to center.

    1 2 3

3. Flex End

justify-content:flex-end;

Items move to end.

        1 2 3

4. Space Between

justify-content:space-between;

Equal space between items.

1        2        3

5. Space Around

justify-content:space-around;

Space around every item.

6. Space Evenly

justify-content:space-evenly;

Perfect equal spacing everywhere.

Real Example

Navigation bar:

nav{
    display:flex;
    justify-content:space-between;
}

Logo goes left, menu goes right automatically.

Align Items

align-items controls alignment on the cross axis.

If row direction:

  • cross axis = vertical

If column direction:

  • cross axis = horizontal

Types of align-items

1. Stretch (Default)

Items stretch to fill height.

align-items:stretch;

2. Center

align-items:center;

Items become vertically centered.

3. Flex Start

align-items:flex-start;

Items align at top.

4. Flex End

align-items:flex-end;

Items align at bottom.

Centering Trick using Flexbox

One of the greatest powers of Flexbox:

Perfect centering.

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

This centers content both horizontally and vertically.

Gap Property

gap adds spacing between flex items.

Before gap:

  • developers used margins
  • layout became messy

Now:

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

Simple and clean.

Example

<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
</div>

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

Equal spacing appears automatically.

Building Layouts using Flexbox

Now let us create real layouts.

Example 1 – Navigation Bar

<nav>
    <h2>Logo</h2>

    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

ul{
    display:flex;
    gap:20px;
    list-style:none;
}

Logic

  • Flexbox keeps logo and menu in one row
  • space-between pushes them apart
  • gap creates spacing

This is how modern websites build headers.

Example 2 – Card Layout

<div class="container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>

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

.card{
    padding:20px;
    border:1px solid gray;
}

Output

Cards appear side by side beautifully.

Example 3 – Center Login Form

<div class="container">
    <form>
        Login Form
    </form>
</div>

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

Form becomes perfectly centered.

Why Companies Love Flexbox

Modern companies use Flexbox because:

  • Fast development
  • Clean responsive layouts
  • Less CSS code
  • Better user experience
  • Easy maintenance

Flexbox is heavily used in:

  • Dashboards
  • Navigation bars
  • Cards
  • Menus
  • Mobile layouts
  • Admin panels

Common Beginner Mistakes

1. Forgetting display:flex

Without it, Flexbox will not work.

2. Using justify-content for vertical alignment incorrectly

Remember:

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

3. Applying Flexbox to wrong element

Always apply Flexbox to the parent container.

Flexbox vs Older Methods

Old Method Problems
Float Difficult alignment
Tables Bad practice
Positioning Complex layouts

Flexbox solved these problems elegantly.

Mini Practice Task

Create:

  • a navbar
  • 3 cards
  • centered button section

using only Flexbox.

This practice builds real confidence.

Learning Outcome

After completing this module, students will be able to:

  • Understand Flexbox fundamentals
  • Create flexible layouts
  • Align items properly
  • Build responsive navigation bars
  • Design card layouts
  • Center elements easily
  • Use spacing professionally
  • Create modern responsive UI designs efficiently

Final Thoughts

Flexbox changed web design like a river changes the shape of land.
What once demanded hundreds of lines now bows gracefully to a few clean rules.

A skilled frontend developer treats Flexbox like a craftsman treats his tools — not merely for arrangement, but for harmony.

Master Flexbox deeply.
Because almost every modern website breathes through it.

List of Modules

Anas Khan
Written by