CSS

Lesson 5: Flexbox Layout

Duration: 90 minutes | Difficulty: Intermediate | Prerequisites: Lessons 1-4 completed

📋 Learning Objectives

By the end of this lesson, you will be able to:

• Understand flexbox concepts and terminology
• Create flexible layouts using flex containers and flex items
• Control alignment and distribution with flexbox properties
• Build responsive layouts that adapt to different screen sizes
• Solve common layout problems using flexbox

🎯 Flexbox Fundamentals

Flexbox (Flexible Box Layout) is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces.

Key Terminology

• Flex Container: Parent element with display: flex
• Flex Items: Direct children of flex container
• Main Axis: Primary axis (horizontal by default)
• Cross Axis: Perpendicular to main axis (vertical by default)

🔧 Container Properties

1. Creating a Flex Container

.container {
    display: flex;        /* Block-level flex container */
    /* OR */
    display: inline-flex; /* Inline-level flex container */
}

2. Flex Direction

Controls the main axis direction.

.container {
    flex-direction: row;         /* Default: left to right */
    flex-direction: row-reverse; /* Right to left */
    flex-direction: column;      /* Top to bottom */
    flex-direction: column-reverse; /* Bottom to top */
}

3. Flex Wrap

Controls whether items wrap to new lines.

.container {
    flex-wrap: nowrap;   /* Default: single line */
    flex-wrap: wrap;     /* Multi-line, top to bottom */
    flex-wrap: wrap-reverse; /* Multi-line, bottom to top */
    
    /* Shorthand */
    flex-flow: row wrap; /* flex-direction + flex-wrap */
}

4. Justify Content

Aligns items along the main axis.

.container {
    justify-content: flex-start;    /* Default: start of container */
    justify-content: flex-end;      /* End of container */
    justify-content: center;        /* Center of container */
    justify-content: space-between; /* Equal space between items */
    justify-content: space-around;  /* Equal space around items */
    justify-content: space-evenly;  /* Equal space everywhere */
}

5. Align Items

Aligns items along the cross axis.

.container {
    align-items: stretch;    /* Default: stretch to fill */
    align-items: flex-start; /* Start of cross axis */
    align-items: flex-end;   /* End of cross axis */
    align-items: center;     /* Center of cross axis */
    align-items: baseline;   /* Baseline of text */
}

6. Align Content

Aligns wrapped lines (only works with multiple lines).

.container {
    flex-wrap: wrap;
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch; /* Default */
}

7. Gap

Adds space between items.

.container {
    gap: 16px;           /* Same gap for both directions */
    row-gap: 16px;       /* Gap between rows */
    column-gap: 24px;    /* Gap between columns */
    
    /* Shorthand */
    gap: 16px 24px;      /* row-gap column-gap */
}

🔧 Item Properties

1. Flex Grow

Controls how much an item should grow.

.item {
    flex-grow: 0; /* Default: don't grow */
    flex-grow: 1; /* Grow to fill available space */
    flex-grow: 2; /* Grow twice as much as items with flex-grow: 1 */
}

2. Flex Shrink

Controls how much an item should shrink.

.item {
    flex-shrink: 1; /* Default: can shrink */
    flex-shrink: 0; /* Don't shrink */
    flex-shrink: 2; /* Shrink twice as much as default */
}

3. Flex Basis

Sets the initial main size before free space is distributed.

.item {
    flex-basis: auto;    /* Default: based on content */
    flex-basis: 200px;   /* Fixed width/height */
    flex-basis: 20%;     /* Percentage of container */
    flex-basis: content; /* Based on content size */
}

4. Flex Shorthand

.item {
    /* flex: grow shrink basis */
    flex: 1;           /* flex: 1 1 0% */
    flex: 1 1 200px;   /* grow: 1, shrink: 1, basis: 200px */
    flex: none;        /* flex: 0 0 auto (inflexible) */
    flex: auto;        /* flex: 1 1 auto (flexible based on content) */
}

5. Align Self

Overrides align-items for individual items.

.item {
    align-self: auto;       /* Default: inherit from container */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: baseline;
    align-self: stretch;
}

🛠️ Hands-On Exercises

Exercise 1: Navigation Bar

<nav class="navbar">
    <div class="nav-brand">Logo</div>
    <ul class="nav-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <div class="nav-actions">
        <button class="btn-login">Login</button>
        <button class="btn-signup">Sign Up</button>
    </div>
</nav>

.navbar {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2563eb;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0 auto; /* Push to center, actions to right */
    padding: 0;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #374151;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-menu a:hover {
    color: #2563eb;
}

.nav-actions {
    display: flex;
    gap: 1rem;
}

.btn-login, .btn-signup {
    padding: 0.5rem 1rem;
    border: 1px solid #2563eb;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-login {
    background: transparent;
    color: #2563eb;
}

.btn-signup {
    background: #2563eb;
    color: white;
}

Exercise 2: Card Grid Layout

<div class="card-grid">
    <div class="card">
        <img src="image1.jpg" alt="Card 1">
        <div class="card-content">
            <h3>Card Title 1</h3>
            <p>Card description goes here...</p>
        </div>
    </div>
    <!-- More cards... -->
</div>

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
}

.card {
    flex: 1 1 300px; /* Grow, shrink, min-width 300px */
    max-width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-4px);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 1.5rem;
}

Exercise 3: Centering Content

<div class="hero">
    <div class="hero-content">
        <h1>Welcome to Our Site</h1>
        <p>Beautiful layouts made easy with Flexbox</p>
        <button class="cta-button">Get Started</button>
    </div>
</div>

.hero {
    display: flex;
    align-items: center;     /* Vertical center */
    justify-content: center; /* Horizontal center */
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.cta-button {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

.cta-button:hover {
    transform: scale(1.05);
}

🚨 Common Pitfalls

1. Forgetting flex-shrink: Items may not shrink as expected
2. Using flexbox for everything: Grid might be better for 2D layouts
3. Not understanding flex-basis: Confusion about initial sizing
4. Overriding flex with width/height: Can cause unexpected behavior

🔍 Best Practices

1. Use flexbox for 1D layouts (navigation, button groups, centering)
2. Combine with CSS Grid for complex layouts
3. Use flex shorthand for cleaner code
4. Test with different content lengths to ensure flexibility
5. Consider accessibility when changing visual order

📝 Assessment

Quick Quiz

1. What’s the difference between justify-content and align-items?
2. How do you make flex items wrap to new lines?
3. What does flex: 1 mean?
4. How do you center content both horizontally and vertically?

Practice Tasks

1. Build a responsive navigation bar
2. Create a flexible card layout
3. Design a pricing table using flexbox
4. Practice different alignment combinations

🔗 What’s Next?

In Lesson 6, we’ll explore CSS Positioning, learning how to precisely place elements using static, relative, absolute, fixed, and sticky positioning.

---

Flexbox is incredibly powerful for creating flexible, responsive layouts. Master these concepts to build modern web interfaces with ease.