Table of Contents
Flow
— how elements move, stack, and take their place on the page
Flow is the default behavior of the web.
It's what's before we add layout rules,
before we adjust spacing,
before we shape structure
— elements simply enter the page
and take the next available position.
Flow is quiet, predictable, and deeply honest.
It tells us:
- elements stack top to bottom
- inline content moves left to right
- each element creates space for the next
- nothing overlaps unless we ask it to
- the page grows naturally as content appears
Flow is the baseline mental model for CSS.
When we understand it,
we can describe layout intentions with clarity
— whether we want to respect the flow, shape it, or break it.
Why Flow matters when working with AI
Flow gives us a shared reference point.
When we say:
“Let the elements follow the normal flow.”
“Keep the natural stacking order.”
“Don’t break the flow.”
“Return this element to the flow.”
AI knows exactly what we mean.
Flow is not a rule
— it is the default state.
Everything else
(flex, grid, positioning)
is a deliberate departure from it.
Related concepts
- Containment — how parents shape the space their children flow into
- Spacing — how flow creates and reveals gaps
- Hierarchy — how flow expresses importance through order
- Normal Flow - This is a similar page in the Foundations Topic
Tony de Araujo —New York | Lisbon