Lesson 01: The one line that lines things up

Before Flexbox, boxes just stack. Why?

Drop three <div>s on a page and they stack vertically, each on its own line. That is normal block layout, and for years the only ways to put them side by side were floats and inline-block hacks that leaked spacing bugs everywhere. If Flexbox feels like a pile of properties you paste and pray over, it is usually because nobody showed you the very first thing it does — the thing every other property depends on.

the full lesson continues on your machine

```agentmentor-check
{
  "id": "css-flexbox-flex-items-scope",
  "label": "which elements are flex items",
  "prompt": "You set display: flex on a container that holds three cards, and each card has a heading and a paragraph inside it. Which elements become flex items and get laid out on the container's main axis?",
  "whyHere": "Beginners often expect display: flex to arrange every descendant. Only the container's direct children become flex items, and that decides what the axis actually moves.",
  "mode": "single",
  "choices": [
    { "id": "all", "text": "Every element inside the container, including the headings and paragraphs.", "correct": false, "feedback": "Flex only reaches one level down. The headings and paragraphs are children of each card, so each card lays them out, not the flex container." },
    { "id": "direct", "text": "Only the container's direct children — the three cards.", "correct": true, "feedback": "Right. display: flex turns the direct children into flex items; a card's own contents are arranged by that card, not by the flex container." },
    { "id": "classed", "text": "Only the elements you also give a special flex class to.", "correct": false, "feedback": "There is no per-item opt-in class. Direct children become flex items automatically once the parent is display: flex." }
  ],
  "copyPurpose": "Copy this question and my answer to an agent so it can check whether I still expect display: flex to arrange every descendant instead of only direct children."
}
```

```agentmentor-check { "id": "css-flexbox-flex-items-scope", "label": "which elements are flex items", "prompt": "You set display: flex on a container that holds three cards, and each card has a heading and a paragraph inside it. Which elements become flex items and get laid out on the container's main axis?", "whyHere": "Beginners often expect display: flex to arrange every descendant. Only the container's direct children become flex items, and that decides what the axis actually moves.", "mode": "single", "choices": [ { "id": "all", "text": "Every element inside the container, including the headings and paragraphs.", "correct": false, "feedback": "Flex only reaches one level down. The headings and paragraphs are children of each card, so each card lays them out, not the flex container." }, { "id": "direct", "text": "Only the container's direct children — the three cards.", "correct": true, "feedback": "Right. display: flex turns the direct children into flex items; a card's own contents are arranged by that card, not by the flex container." }, { "id": "classed", "text": "Only the elements you also give a special flex class to.", "correct": false, "feedback": "There is no per-item opt-in class. Direct children become flex items automatically once the parent is display: flex." } ], "copyPurpose": "Copy this question and my answer to an agent so it can check whether I still expect display: flex to arrange every descendant instead of only direct children." } ```

# Lesson 01: The one line that lines things up > Lesson objectives: > - Say what `display: flex` does to a container and its children. > - Identify which elements become flex items (and which do not). > - Predict that flex items sit in a row along the main axis by default. >

# Lesson 02: Two axes, two properties > Lesson objectives: > - Name the main axis and the cross axis of a flex container. > - Match `justify-content` to the main axis and `align-items` to the cross axis. > - Center an item horizontally and vertically on purpose, not by luck. >

# Lesson 03: Turning the main axis with flex-direction > Lesson objectives: > - Say what `flex-direction` does and name its four values. > - Explain why `justify-content` is not "the horizontal property." > - Predict which property moves items vertically once the main axis is a column. >

# Lesson 04: Sharing the leftover space > Lesson objectives: > - Explain what `flex-basis`, `flex-grow`, and `flex-shrink` each control. > - Predict how `flex-grow` divides the free space (not the total width). > - Read the `flex` shorthand and know what `flex: 1` expands to. >

# Lesson 05: Wrapping into real layouts > Lesson objectives: > - Use `flex-wrap: wrap` so items flow onto multiple rows instead of overflowing. > - Space items with `gap` instead of fiddly margins. > - Build a real, responsive nav and card row using everything from this course. >

{ "schemaVersion": 2, "originalRequest": "I already write basic HTML and CSS — I can set colors, padding, and widths and style a simple page — but Flexbox still feels like guesswork. I never know when to use justify-content versus align-items, I have no intuition for the main axis versus the cross axis, and flex-grow/flex-shrink/flex-basis confuse me. I don't know CSS Grid. Teach me Flexbox so I can confidently build common layouts like centering, nav bars, and card rows.", "learnerBrief": "A developer comfortable with basic HTML/CSS but not with Flexbox. The goal is a genuine mental model of the flex container's two axes so the alignment and sizing properties stop being guesswork, ending with the ability to build common real layouts.",

# Sources ## S1 — MDN: Basic concepts of flexbox URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts - authority: official-docs - supports: Lessons 01-03 — what `display: flex` does, direct children becoming flex items, the main axis and cross axis, and that `justify-content` aligns on the main axis while `align-items` aligns on the cross axis.

Publish the course

Once a course is generated, it can be published as a URL. Open it yourself, or send it to colleagues, employees, students.

Self-hosted

A course is just plain files. Put it on any static host or your own server.

Hosted

Publish a URL. Edit the course and the same link updates. No server to run. Available after you buy Base.

Available after you buy Base. Credits and billing show up in your account once set up.

Tell your agent what to learn.It writes the lessons.

Lesson 01: The one line that lines things up

Before Flexbox, boxes just stack. Why?

Try what it writes.

You name it. It writes it.

Agent Mentor: from first request to export

Delegating to an AI agent: a practical introduction

CSS Flexbox: axes, alignment, and flexible sizing

Music theory basics: from note names to triads

Git fundamentals: commits, history, and branches

HTTP basics: reading requests and responses in the browser

JavaScript async/await: the event loop and execution order

Terminal basics: files, folders, and commands

whatever you name next

The lessons are yours.

The course is written. What else can it do?

Publish the course

Questions.