Display and normal flow

Before you write any layout CSS, the browser already has a layout for your page. It’s called normal flow: everything stacked top to bottom in source order, text wrapping inside its container. It’s what you see when a stylesheet fails to load.

Normal flow has two kinds of boxes. Block boxes stack vertically and take the full available width. Headings, paragraphs, sections, and divs are block by default. Inline boxes sit inside a line of text and flow with it. Links, strong, em, and span are inline.

The display property lets you change which kind an element generates:

nav a {
  display: block;
}

Each link now starts on its own line and stretches across the nav.

The values you’ll use

• block: starts a new line and fills the available width. Accepts width, height, and vertical margins.
• inline: flows with text. width and height are ignored.
• inline-block: flows with text but accepts dimensions. Useful for a button inside a sentence.
• flex and grid: turn the element into a layout container for its children. The next two modules cover these.
• none: no box at all. The element takes no space, as if it weren’t in the HTML.

Outside and inside

Notice that display answers two questions at once. How does this element behave among its siblings? And how does it lay out its children?

display: flex makes the element a block on the outside, so it stacks like a paragraph, and a flex container on the inside. display: inline-flex keeps the flex layout inside, but flows inline with the surrounding text. Same idea for grid and inline-grid.

Hidden is not one thing

display: none removes the box. Screen readers skip the element too. visibility: hidden keeps the box and its space, but makes it invisible, and also hides it from assistive technology.

Neither is right when something should be invisible on screen but still read aloud, like the text label of an icon button. That needs the “visually hidden” technique, which moves the element off screen but keeps it in the document.

Start from flow

My approach: write the HTML in the order it should be read, look at it in normal flow, and only then add flex or grid where content needs to sit side by side. A page whose source order makes sense survives a lot: a failed stylesheet, a narrow screen, a screen reader.

Try this on the course page once the header and the feature grid are done. Uncheck display: flex and display: grid in DevTools. If the page still reads in a sensible order top to bottom, the HTML is right. If it doesn’t, fix the HTML, not the CSS.