Lesson 11: Introduction to Flexbox - Modern Layout Basics

What You'll Learn

What Flexbox is and why it's revolutionary
How to create a flex container
Main axis vs cross axis
Basic flex container properties
Basic flex item properties
Creating simple flexible layouts

Why This Matters

Flexbox (Flexible Box Layout) is the modern way to create layouts in CSS. It makes previously difficult tasks (like centering, equal heights, flexible spacing) incredibly easy. It's essential for modern web development.

Part 1: What is Flexbox?

The Old Way (Pain!)

Before Flexbox, centering and creating flexible layouts was difficult:

/ Painful old centering method /
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The Flexbox Way (Easy!)

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

Done! Everything inside is centered!

Part 2: Creating a Flex Container

Display: Flex

.container {
    display: flex;
}

This changes everything!

The container becomes a flex container
Direct children become flex items
Items line up in a row by default

Example:

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

.container {
    display: flex;
    / Items now in a row! /
}

Part 3: Main Axis vs Cross Axis

Understanding axes is KEY to Flexbox:

Horizontal Row (Default)

Main Axis →
    ┌─────────────────────┐
    │  ┌───┐ ┌───┐ ┌───┐  │ ↓ Cross
    │  │ 1 │ │ 2 │ │ 3 │  │   Axis
    │  └───┘ └───┘ └───┘  │
    └─────────────────────┘

Vertical Column

    ┌─────────────┐
    │   ┌───┐     │ ↓ Main Axis
    │   │ 1 │     │
    │   └───┘     │
    │   ┌───┐     │
    │   │ 2 │     │
    │   └───┘     │
    │   ┌───┐     │
    │   │ 3 │     │
    │   └───┘     │
    └─────────────┘
      ← Cross Axis →

Remember:

Main Axis = Direction items flow
Cross Axis = Perpendicular to main axis

Part 4: Flex Direction

Row (Default)

.container {
    display: flex;
    flex-direction: row;  / Left to right /
}

Row Reverse

.container {
    display: flex;
    flex-direction: row-reverse;  / Right to left /
}

Column

.container {
    display: flex;
    flex-direction: column;  / Top to bottom /
}

Column Reverse

.container {
    display: flex;
    flex-direction: column-reverse;  / Bottom to top /
}

Example:

<div class="row-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

<div class="column-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

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

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

Part 5: Justify Content (Main Axis Alignment)

Controls spacing along the main axis.

Flex-Start (Default)

.container {
    display: flex;
    justify-content: flex-start;  /* Packed to start */
}

1

2

3

Flex-End

.container {
    display: flex;
    justify-content: flex-end;  /* Packed to end */
}

1

2

3

Center

.container {
    display: flex;
    justify-content: center;  /* Centered */
}

1

2

3

Space-Between

.container {
    display: flex;
    justify-content: space-between;  /* Max space between */
}

1

2

3

Space-Around

.container {
    display: flex;
    justify-content: space-around;  /* Equal space around */
}

1

2

3

Space-Evenly

.container {
    display: flex;
    justify-content: space-evenly;  /* Perfectly even spacing */
}

1

2

3

Part 6: Align Items (Cross Axis Alignment)

Controls alignment along the cross axis.

Stretch (Default)

.container {
    display: flex;
    align-items: stretch;  /* Items stretch to fill */
}

1

2

3

Flex-Start

.container {
    display: flex;
    align-items: flex-start;  /* Align to top */
}

1

2

3

Flex-End

.container {
    display: flex;
    align-items: flex-end;  /* Align to bottom */
}

1

2

3

Center

.container {
    display: flex;
    align-items: center;  /* Vertically centered */
}

1

2

3

Baseline

.container {
    display: flex;
    align-items: baseline;  /* Align text baselines */
}

1

2

3

Part 7: Perfect Centering

The most common use case!

.container {
    display: flex;
    justify-content: center;  /* Horizontal center */
    align-items: center;      /* Vertical center */
    height: 400px;
}

Example:

<div class="container">
    <div class="box">Perfectly Centered!</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    background-color: #f0f0f0;
}

.box {
    background-color: #3498db;
    color: white;
    padding: 30px;
    border-radius: 8px;
}

✨ Perfectly Centered! ✨

Part 8: Flex Wrap

By default, flex items try to fit in one line. flex-wrap allows wrapping.

No Wrap (Default)

.container {
    display: flex;
    flex-wrap: nowrap;  /* All items in one line */
}

1

2

3

4

5

6

Items stay in one line and may shrink or overflow

Wrap

.container {
    display: flex;
    flex-wrap: wrap;  /* Items wrap to new line */
}

Example:

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

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

1

2

3

4

5

6

Items automatically wrap to next line when needed! Try resizing your browser.

Part 9: Gap (Spacing Between Items)

Modern way to add spacing between flex items:

.container {
    display: flex;
    gap: 20px;  /* 20px between all items */
}

1

2

3

4

Clean 20px spacing between all items - no messy margins!

Before gap, we needed:

.item {
    margin-right: 20px;  /* Awkward! */
}

.item:last-child {
    margin-right: 0;  /* Remove from last */
}

With gap:

.container {
    display: flex;
    gap: 20px;  /* So much easier! */
}

Different horizontal and vertical gaps:

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;  /* row-gap  column-gap */
}

1

2

3

4

5

6

20px vertical gap, 40px horizontal gap between items

Part 10: Complete Example - Simple Layout

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Basics</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="logo">My Site</div>
        <nav class="nav">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#services">Services</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <main class="hero">
        <div class="hero-content">
            <h1>Welcome to Flexbox</h1>
            <p>Building layouts the modern way</p>
            <button>Get Started</button>
        </div>
    </main>
    
    <section class="features">
        <div class="feature-card">
            <h3>Easy</h3>
            <p>Simple and intuitive</p>
        </div>
        <div class="feature-card">
            <h3>Flexible</h3>
            <p>Adapts to any screen</p>
        </div>
        <div class="feature-card">
            <h3>Powerful</h3>
            <p>Handles complex layouts</p>
        </div>
    </section>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/ Header with Flexbox /
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #2c3e50;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

.nav {
    display: flex;
    gap: 30px;
}

.nav a {
    color: white;
    text-decoration: none;
}

.nav a:hover {
    text-decoration: underline;
}

/ Hero Section - Centered Content /
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 24px;
    margin-bottom: 30px;
}

.hero-content button {
    padding: 15px 40px;
    font-size: 18px;
    background-color: white;
    color: #667eea;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: bold;
}

.hero-content button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/ Feature Cards /
.features {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    padding: 60px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    flex: 1;
    padding: 40px;
    text-align: center;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feature-card h3 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #2c3e50;
}

.feature-card p {
    font-size: 16px;
    color: #666;
}

Practice Exercises

Exercise 1: Navigation Bar

Create a responsive navigation bar with:

Logo on left
Menu items on right
All vertically centered
Equal spacing between menu items

Exercise 2: Card Grid

Create a grid of 6 cards that:

Display in rows of 3
Have equal heights
Have gaps between them
Wrap to new rows when necessary

Exercise 3: Perfect Centering

Create three examples of centered content:

Text centered both horizontally and vertically
Multiple items centered
A login form centered on the page

What You Learned

✅ What Flexbox is and why it's useful
✅ How to create flex containers
✅ Main axis vs cross axis concept
✅ flex-direction property
✅ justify-content for main axis alignment
✅ align-items for cross axis alignment
✅ flex-wrap for wrapping items
✅ gap for spacing between items
✅ How to create simple flexible layouts

What's Next?

In the next lesson, you'll learn more Flexbox properties - flex-grow, flex-shrink, flex-basis, and advanced alignment techniques!