Note: This document is a work in progress. You can help improve it.

Normal Flow

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.

Let's look at a quick HTML example:

Note here how the HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.

The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.

<p>I love programming.</p>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
<p>Code The Web</p>

When you use CSS to create a layout, you are moving the elements away from the normal flow, but for many of the elements on your page the normal flow will create exactly the layout you need. This is why starting with a well-structured HTML document is so important, as you can then work with the way things are laid out by default rather than fighting against it.

The methods that can change how elements are laid out in CSS are as follows:

The display propertyValues such as block, inline or inline-block can change how elements behave in normal flow
FloatsApplying a float value such as left can cause block level elements to wrap alongside one side of an element, like the way images sometimes have text floating around them in magazine layouts.
The position propertyAllows you to precisely control the placement of boxes inside other boxes.
Table layoutDesigned for styling the parts of an HTML table can be used on non-table elements using display: table and associated properties.
Multi-column layoutCauses the content of a block to layout in columns, as you might see in a newspaper.

The Display Property

Primarily what we will be covering is using the display property to control flow. Every element in CSS has a default display property which gives it a natural flow in the page. When discussing customizing a layout the two most important values are display: flex and display: grid In this lesson we will primarily cover display: flex