Flex Containers

The Architect’s Stage

Before the Architect can guide the line,
they need a stage.

That stage is the flex container —
any element you bless with:

display: flex;
/* or */
display: inline-flex;

From that moment on:

• the element becomes a flex container
• its direct children become flex items
• and the normal block/inline rules quietly step aside

No grid yet. No magic ratios.
Just one decision:

“This box now controls the flow of its children.”

---

🧱 What Is a Flex Container, Really?

A flex container is a layout context.

Inside that context, the Architect gets to choose:

• direction of the line (row vs column)
• wrapping behavior
• alignment along the main and cross axes
• how items share extra or missing space

Outside the container, nothing changes.
Inside, everything obeys Flexbox.

<main class="dashboard">
  <section class="card">One</section>
  <section class="card">Two</section>
  <section class="card">Three</section>
</main>

.dashboard {
  display: flex; /* flex container */
  gap: 1.5rem; /* spacing between items */
}

.card {
  padding: 1.5rem;
  background: var(--surface-elevated);
  border-radius: 0.75rem;
}

<main> is now the Architect’s workbench.
Each .card is a flex item on that stage.

---

🎭 Only Direct Children Join the Cast

Flexbox doesn’t reach down the whole tree.
It only acts on direct children of the container.

<ul class="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/schedule">Schedule</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

.nav {
  display: flex; /* li elements become flex items */
}

.nav li {
  list-style: none;
}

.nav a {
  display: block; /* normal block-level inside each item */
  padding: 0.75rem 1.25rem;
}

• ul.nav → flex container
• li elements → flex items
• the <a> tags inside? Not flex items.
  They’re just regular content inside each actor.

If you need those inner elements to flex,
you give them their own display: flex; stage.

---

🧭 Container-Only Controls (Preview)

The container owns the big levers:

• flex-direction – which way the line runs
• flex-wrap – whether items stay on one line or wrap
• justify-content – alignment along the main axis
• align-items – alignment along the cross axis
• align-content – how multiple lines pack together
• gap / row-gap / column-gap – built-in gutters

We’ll forge each of these in separate chambers.
For now, your job is simply:

Pick the element that should control the flow,
and declare it a flex container.

---

🧪 MiniMo — From Static Stack to Flex Stage

Same HTML structure, same children.
One new rule — display: flex; —
and the entire behavior of the layout changes.

That’s the Architect’s power:
redefine the stage without rewriting the script.

---

🔗 Explore Flex Containers in the Demo Lab

Open 01 — Flex Containers Demo

Clone it, tweak the container, break it, fix it.
Change which element gets display: flex; and watch how the cast reacts.

---

⏭ Next Chamber — Flex Items

We’ve built the workbench.
Next, the Architect starts tuning the actors.