Normal Flow — How the Browser Lays Out Elements by Default

Before you can use Flexbox effectively, you need to understand what it replaces — or more precisely, what it extends. The browser has a default layout system called normal flow, and every CSS layout technique is ultimately a way to step outside or override it.

What normal flow is

Normal flow is the default way the browser positions elements when you have not applied any layout CSS. There are two formatting contexts in normal flow:

Block formatting context — block-level elements stack vertically. Each block starts on a new line and takes the full width of its containing block (its parent element). The height of each block is determined by its content.

<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

Without any layout CSS, these three <div> elements stack in a single vertical column, each taking the full width of the page. That is block formatting context.

Inline formatting context — inline elements flow horizontally, like words in a sentence. They sit next to each other on the same line until they run out of space, then wrap to the next line.

<p>Visit our <a href="/tours">tours page</a> to see all available hikes.</p>

The <a> sits inside the line of text — it does not create a new line. That is inline formatting context.

The containing block

Every element in normal flow sizes itself relative to its containing block — usually its nearest block-level ancestor.

• A block element inherits width from its containing block (taking up 100% of available width by default)
• A block element’s height is determined by its content
• Percentage widths and heights are calculated relative to the containing block

.site-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

/* .site-wrapper is the containing block for its children */
/* Children default to 100% of 1100px max width */

How margin, padding, and border affect normal flow

Box model properties affect position within normal flow:

• margin creates space between elements (and collapses vertically between adjacent blocks)
• padding creates space inside the element’s border
• border adds width that pushes content inward

None of these properties move an element out of normal flow. They expand, contract, or space elements, but each block still occupies a full row.

The limitation of normal flow

Normal flow is well-suited for document-style content — headings followed by paragraphs, bulleted lists, a form with labels above inputs. That is exactly what HTML was designed for.

But modern web UI requires patterns that normal flow cannot produce without additional tools:

• A horizontal navigation bar — nav links that flow in a row and stay centered regardless of the number of links
• A card grid — tour cards arranged side by side in rows, all the same height
• A hero section — content centered both horizontally and vertically within a container

With only normal flow, the nav links stack vertically. The tour cards stack in a single column. The hero content sits at the top-left corner.

This is not a bug — it is what normal flow is designed to do. For these UI patterns, you need a layout system.

Layout systems in CSS

CSS provides several ways to step outside normal flow:

• Floats — the original technique for horizontal layout; largely replaced by Flexbox and Grid
• Absolute/relative positioning — removes elements from flow for precise placement
• Flexbox — one-dimensional layout along a row or column
• Grid — two-dimensional layout across rows and columns simultaneously

Flexbox is the right tool for the patterns above — navigation bars, card rows, and centered content. It is what this module teaches.

The analogy: normal flow is like reading a document top to bottom — each paragraph starts on a new line, words flow left to right, and content stacks vertically. Flexbox is like being a manager who can rearrange the document — you decide whether items go in a row, how they’re spaced, and where they align.

Exercise

Before applying any Flexbox, look at the STO site in its current state and identify what normal flow cannot give you:

1. Open index.html in the browser with only your typography and box model CSS applied — no layout rules yet.

2. Observe the navigation. The <a> links inside <nav> are inline by default — they may flow somewhat horizontally, but they are not properly distributed as a nav bar. If you have <li> elements wrapping them, those are block by default and stack vertically.

3. Observe the tour card section. The .tour-card elements (which are <div> or <article> blocks) stack in a single column.

4. Observe the hero. The headline and description text are left-aligned, not centered vertically within the hero container.

Write down these three observations — they are exactly what the next five lessons will fix with Flexbox.

Recap

• Normal flow places block elements in a vertical stack, each taking full available width.
• Inline elements flow horizontally like words in a sentence.
• The containing block determines an element’s default width and the reference for percentage values.
• Normal flow is the right system for document content but insufficient for modern UI patterns like navbars, card grids, and centered sections.
• Flexbox is a layout system that lets you arrange items along a single axis — horizontal or vertical — with precise control over spacing and alignment.

Lesson 02 activates Flexbox with display: flex and introduces the all-important flex container vs flex item distinction.