CSS Foundations: Flexbox

Day 14 📦

CSCI 3403 - Web Programming

Master modern layouts with Flexbox!

⚠️ Reminder: Landing Page Project due next Thursday night!

Today's Agenda 📋

📚 Quick Review: Growing & Shrinking (5 min)
🧭 Flexbox Axes (15 min)
🎯 Alignment Properties (20 min)
💻 Practice Examples (10 min)
📌 Homework Reminder

Learning Objectives

By the end of this lecture, you will:

✅ Understand main axis vs cross axis
✅ Master flex-direction and its impact
✅ Use justify-content and align-items effectively
✅ Apply the gap property
✅ Build practical flex layouts

Part 1: Quick Review 🔄

The Flex Shorthand

Remember: flex is actually THREE properties!

                /* This shorthand... */

                flex: 1;

                /* ...equals these three properties: */

                flex-grow: 1;

                flex-shrink: 1;

                flex-basis: 0;

Key Point: When you see flex: 1, think "grow evenly from 0"

Flex Properties Recap

flex-grow

• Controls how items grow to fill space
• Default: 0 (don't grow)
• flex-grow: 1 = all items grow equally

flex-shrink

• Controls how items shrink when space is tight
• Default: 1 (shrink evenly)
• flex-shrink: 0 = never shrink

flex-basis

• Sets the starting size before growing/shrinking
• Default: auto (check for width/height)
• With flex: 1 it becomes 0

Important Gotcha! ⚠️

                /* These are different! */

                flex: 1;           /* flex: 1 1 0 */

                flex-grow: 1;      /* flex: 0 1 auto */

                flex: auto;        /* flex: 1 1 auto */

Remember: flex: 1 sets basis to 0, but using flex-grow: 1 alone keeps basis at auto

Part 2: Flexbox Axes 🧭

The Core Concept

Every flex container has:

Main Axis - primary direction of flow
Cross Axis - perpendicular to main

Main → Cross ↓

Flex Direction

                .container {

                  flex-direction: row;    /* Default: left to right */

                  flex-direction: column; /* Top to bottom */

                }

Row (default)

• Main axis: horizontal (→)
• Cross axis: vertical (↓)

Column

• Main axis: vertical (↓)
• Cross axis: horizontal (→)

Visual Example: Row vs Column

Row Direction (default):

Box 1

Box 2

Box 3

Column Direction:

Box 1

Box 2

Box 3

Critical Concept: Basis Changes!

When flex-direction changes, so does what flex-basis refers to:

In Row Direction:

flex-basis = width
Items fill container width

In Column Direction:

flex-basis = height
Items need explicit height or content

Common Column Pitfall 🪤

                .container {

                  display: flex;

                  flex-direction: column;

                }

                .item {

                  flex: 1; /* Might collapse! */

                }

Why? flex: 1 means flex-basis: 0, and empty divs have 0 height!

Solution: Use flex: 1 1 auto or set container height

Part 3: Alignment 🎯

Positioning Flex Items

Two main properties for positioning:

justify-content

• Aligns items along the main axis
• Think: "justifying text" (horizontal)

align-items

• Aligns items along the cross axis
• Think: "aligning to baseline" (vertical)

Justify-Content Values

Along the main axis:

                .container {

                  justify-content: flex-start;     /* Default */

                  justify-content: flex-end;

                  justify-content: center;

                  justify-content: space-between;

                  justify-content: space-around;

                  justify-content: space-evenly;

                }

Justify-Content Visual

`flex-start` (default)

Box

`center`

Box

`space-between`

Box

Align-Items Values

Along the cross axis:

                .container {

                  align-items: stretch;    /* Default */

                  align-items: flex-start;

                  align-items: flex-end;

                  align-items: center;

                  align-items: baseline;

                }

Perfect Centering 🎯

The holy grail of CSS - centering a div!

                .container {

                  display: flex;

                  justify-content: center;  /* Center on main axis */

                  align-items: center;      /* Center on cross axis */

                }

This centers items both horizontally AND vertically!

Direction Changes Everything!

Remember: When flex-direction: column:

justify-content works vertically
align-items works horizontally

                .container {

                  flex-direction: column;

                  justify-content: center;  /* Now vertical! */

                  align-items: center;      /* Now horizontal! */

                }

This is opposite of the default row behavior!

The Gap Property 🌉

Modern spacing solution - adds space BETWEEN items:

                .container {

                  display: flex;

                  gap: 16px;  /* Space between all items */

                }

Benefits over margin:

✅ No extra space on edges
✅ Cleaner, more predictable
✅ Works in all modern browsers

Part 4: Practice Examples 💻

Let's see flexbox in action with real-world patterns!

Example 1: Navigation Bar

                .nav {

                  display: flex;

                  justify-content: space-between;

                  align-items: center;

                  padding: 1rem;

                }

                .nav-links {

                  display: flex;

                  gap: 2rem;

                }

Logo on left, links on right, everything vertically centered

Example 2: Card Layout

                .card-container {

                  display: flex;

                  gap: 1rem;

                  flex-wrap: wrap;  /* Bonus property! */

                }

                .card {

                  flex: 1 1 300px;  /* Grow, shrink, min 300px */

                }

Responsive cards that grow and wrap as needed

Example 3: Centered Modal

                .modal-overlay {

                  display: flex;

                  justify-content: center;

                  align-items: center;

                  position: fixed;

                  inset: 0;

                }

                .modal {

                  /* No flex needed - stays its size */

                  width: 500px;

                  max-width: 90%;

                }

Perfect centering for popups and modals

Example 4: Footer with Columns

                .footer {

                  display: flex;

                  justify-content: space-around;

                  gap: 2rem;

                }

                .footer-column {

                  flex: 1;

                }

Equal-width columns with consistent spacing

Common Patterns to Remember

Center everything: justify-content: center; align-items: center;
Space between items: justify-content: space-between;
Sticky footer: flex-direction: column; flex: 1; on main content
Equal columns: flex: 1; on all children
Prevent shrinking: flex-shrink: 0;

Debugging Flexbox 🐛

Tips when things go wrong:

Check flex-direction - Are your axes what you think?
Check flex-basis - Is it 0 or auto?
Check container height - Column direction needs it!
Use browser DevTools - Firefox has amazing flexbox inspector
Add borders - Visualize what's happening

Quick Quiz 🤔

What's the difference between flex: 1 and flex-grow: 1?
How do you center a div completely?
What happens to justify-content when you use flex-direction: column?
When would you use flex-shrink: 0?

Think about these - we'll discuss answers together!

Resources for Practice 📚

Interactive Games:

Flexbox Froggy - Fun alignment practice
Flexbox Zombies - Gamified learning

References:

CSS Tricks Flexbox Guide - Visual cheatsheet
MDN Flexbox - Comprehensive docs
Interactive Guide to Flexbox - Beautiful examples

Key Takeaways 🎯

✅ Flexbox has two axes: main and cross
✅ flex-direction changes which axis is which
✅ justify-content = main axis alignment
✅ align-items = cross axis alignment
✅ flex: 1 is different from flex-grow: 1
✅ Use gap for spacing between items

Homework Reminder 📌

Landing Page Project

DUE: Next Thursday Night

Requirements:

Use flexbox for layout
Include navigation, hero, cards, and footer
Make it responsive with flexbox
No CSS frameworks - pure flexbox!

Start early! Use what we learned today.

Questions? 🤚

Next Class:

CSS Grid fundamentals
Combining Grid with Flexbox

Office Hours:

Tomorrow 2-4 PM
Bring your Landing Page questions!

Let's Code! 💻

Time for live practice - open your editors!

We'll build:

A navigation bar
A hero section with centered content
A card layout with flex

Tip: Follow along and ask questions!

Thank You! 🙏

Remember:

Practice with Flexbox Froggy tonight
Start your Landing Page project
Review the Odin Project exercises
Ask questions in Discord!

See you next class! 👋