02. Flexbox — Alignment and Distribution

_{—Part of CSS Primer for the AI Era — Layout}

Flexbox is the browser’s tool for alignment.
Where normal flow gives us vertical stacking and inline wrapping,
flexbox gives us a way to align, distribute, and order elements along a single axis:
horizontaly or vertically. → or ↓

It is a one‑dimensional layout system —
a quiet, intentional extension
of normal flow, but not a replacement.

We reach for flexbox when we need:

• horizontal alignment
• vertical centering
• controlled spacing
• predictable wrapping
• simple, component‑level layout

Flexbox is at its best when used with restraint.

Flexbox is a one‑dimensional layout system.
It arranges items along one axis,
and lets us align them along the other.

There are only two axes:

• main axis — the direction items flow
• cross axis — the perpendicular direction used for alignment.
  (Think of it as either height or width, depending on the direction you choose for your Flexbox).

We choose the direction (main axis) with:

flex-direction: row;      /* items flow left → right */
flex-direction: column;   /* items flow top → bottom */

Everything flexbox does happens within this simple structure.

If flex-direction: row
The main axis (direction) is horizontal:

[ item ][ item ][ item ]   ← main axis (row)
      ↑
      | cross axis (height of the row)
      |

• Items flow left → right
• The cross axis is the height of that row
• Flexbox can align items within that height (top, center, bottom, stretch)

Flexbox does not create multiple rows with shared alignment rules.
It aligns items within a single row.

If flex-direction: column
The main axis is vertical:

[ item ]
[ item ]
[ item ]   ← main axis (column)
← cross axis (width of the column) →

• Items flow top → bottom
• The cross axis is the width of that column
• Flexbox can align items within that width (left, center, right, stretch)

Flexbox does not create multiple columns with shared alignment rules.
It aligns items within a single column.

Why this matters

Flexbox always has two axes, but only one is structural.

• The main axis determines layout
• The cross axis determines alignment

Flexbox never creates a second structural dimension.

Flexbox is ideal for:

• aligning items horizontally
• centering items vertically
• distributing space between items
• creating small UI components
• building navigation bars
• aligning icons with text
• simple two‑column layouts

It is not ideal for:

• full‑page layouts
• complex grids
• multi‑row structures
• precise two‑dimensional design

Those belong to CSS Grid.

Flexbox has only a few properties that matter in everyday use.
Everything else is refinement.

a) display: flex — turning on the system

.container {
  display: flex;
}

This creates a flex container.
Its children become flex items.

b) flex-direction — choosing the axis

flex-direction: row;    /* default */
flex-direction: column;

c) justify-content — alignment along the main axis
Used for:

• left / center / right alignment
• distributing space

justify-content: flex-start;
justify-content: center;
justify-content: space-between;

d) align-items — alignment along the cross axis
Used for:

• vertical centering (in a row)
• horizontal centering (in a column)

align-items: center;

e) gap — spacing between items

gap: 1rem;

This is the modern, clean way to create space.

.header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

This gives us:

[logo] [title]

No floats.
No positioning.
Just alignment.

Flexbox does not replace normal flow — it modifies it.
Here's what we mean:

• Items still appear in document order
• Items still wrap if we allow them
• Items still size themselves based on content

Flexbox simply gives us control over alignment,
not structure.

Use flexbox to align items,
not to build the page.

a) Centering a single element

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

b) Spacing items evenly

nav {
  display: flex;
  justify-content: space-between;
}

c) Aligning an icon with text

.button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

d) Simple two‑column layout

.two-column {
  display: flex;
  gap: 2rem;
}

Flexbox becomes fragile when used for:

• full‑page layouts
• multi‑row grids
• precise alignment across rows
• forcing equal heights
• overriding natural flow unnecessarily

These are signs we should switch to Grid or return to normal flow.

These cues help AI choose flexbox only when appropriate:

• “Use flexbox for horizontal alignment — keep it one‑dimensional.”
• “Use align-items for vertical centering — no positioning needed.”
• “Use gap instead of margins for spacing between items.”
• “Avoid flexbox for vertical stacking — normal flow already does that.”
• “Switch to grid if the layout needs rows and columns.”

These phrases keep AI grounded in the system’s intent.

Flexbox gives us alignment along a single axis.
But some layouts need structure in two directions at once
— rows and columns.

That’s where Grid becomes the natural next step.

• Grid is the layout system for structure.
• Flexbox is the layout system for alignment.

• Suggested Next Reading: → Grid: Structure and Composition

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←