After finishing this lesson, you will be confident in these 3 things.

• ▸✅ The 4 box regions: Content / Padding / Border / Margin
• ▸✅ Why box-sizing: border-box is the standard
• ▸✅ Patterns for resolving Margin Collapsing

Keep the learning objectives as a checklist, and close the lesson once you can answer all of them.

The one-line summary

Flexbox = a CSS tool that flexibly aligns items in one direction (horizontal or vertical). Since being standardized in 2015, it has become the mainstream of modern CSS layout. The era of old float·table techniques is over.

Basic usage

.container {
    display: flex;           /* Start flex */
    gap: 16px;               /* Spacing between children */
}

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

A·B·C are aligned in a single horizontal row. Intuitive and clean.

Two axes — main vs cross

                 main axis →
              ┌────────────────┐
       cross  │  ┌─┐ ┌─┐ ┌─┐  │
        axis  │  │A│ │B│ │C│  │
          ↓   │  └─┘ └─┘ └─┘  │
              └────────────────┘

• ▸main axis — the primary direction (horizontal by default)
• ▸cross axis — the perpendicular direction

You can switch to vertical layout with flex-direction: column.

Alignment — just memorize these 2

.container {
    display: flex;
    justify-content: center;    /* Main axis alignment (horizontal) */
    align-items: center;        /* Cross axis alignment (vertical) */
}

5 values (justify-content):

• ▸flex-start — align to start
• ▸center — align to center
• ▸flex-end — align to end
• ▸space-between — both ends + equal spacing between
• ▸space-around / space-evenly — equal spacing on sides and between

The 3 most common patterns

1. Header — logo on the left, menu on the right:

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

2. Center alignment (both horizontal and vertical):

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

CSS's eternal challenge — centering — solved in two lines.

3. Child proportions — the flex property:

.main { flex: 3; }       /* 3 times */
.sidebar { flex: 1; }    /* 1 time */
/* main is 3 times larger than sidebar */

The flex shorthand

.item {
    flex: 1 1 200px;
    /* flex-grow flex-shrink flex-basis */
    /* Grow ratio / Shrink ratio / Base size */
}

Commonly used shorthands:

• ▸flex: 1 — takes up space equally as much as possible
• ▸flex: 0 0 200px — fixed 200px, does not grow or shrink

Quick summary

• ▸display: flex + gap + justify-content + align-items = 99% of layouts
• ▸Optimized for single-direction alignment
• ▸For two dimensions (rows + columns), use Grid
• ▸Old float·table techniques are completely obsolete — Flexbox is the standard

Once you understand the concepts in this lesson, you can give AI specific instructions. Instead of a vague 'fix this,' you make requests with vocabulary — that's the starting point for saving tokens.

• ▸"Align this header with Flexbox: logo on the left, menu in the center, button on the right"
• ▸"Use flex-wrap to make this card grid 1 column on mobile and 3 columns on desktop"
• ▸"I keep confusing align-items and justify-content — please clarify them clearly"

Why does this save tokens?

When you don't know the concepts, even after receiving an AI response you still have to ask 'What does that mean?' again. That follow-up question is what eats up tokens. Learn the concepts once, and the conversation wraps up in one shot.