Normal Flow CSS Layout – Explained with an Example

Normal flow is the default way of laying out elements on an HTML page.

In other words, an HTML page is in a normal flow layout when you do nothing to rearrange the default positioning of its elements.

note

Normal flow is sometimes called "flow layout".

Example 1: Normal Flow Layout

Consider the following code:

HTML

<h2>Hello there! 👋 I am CodeSweetly</h2>
<p>My favorite colors are:</p>
<ol>
  <li class="chocolate">Chocolate</li>
  <li class="green">Green</li>
  <li class="purple">Purple</li>
</ol>

CSS

.chocolate {
  border: 2.5px solid rgb(210, 105, 30);
  background-color: rgba(210, 105, 30, 0.5);
}

.green {
  border: 2.5px solid rgb(76, 210, 30);
  background-color: rgba(76, 210, 30, 0.5);
}

.purple {
  border: 2.5px solid rgb(103, 30, 210);
  background-color: rgba(103, 30, 210, 0.5);
}

Suppose you do nothing to manipulate the HTML document's default layout. In that case, browsers will display the above snippet in its normal flow like so:

http://localhost:3000

Hello there! 👋 I am CodeSweetly

My favorite colors are:

1. Chocolate
2. Green
3. Purple

Try it on StackBlitz

CodeSweetly ads

Use Flexbox like a pro

Learn CSS Flexbox with live examples and images.

Check it out

Example 2: Out of Flow Layout

Consider the following code:

HTML

<h2>Hello there! 👋 I am CodeSweetly</h2>
<p>My favorite colors are:</p>
<ol>
  <li class="chocolate">Chocolate</li>
  <li class="green">Green</li>
  <li class="purple">Purple</li>
</ol>

CSS

.chocolate {
  border: 2.5px solid rgb(210, 105, 30);
  background-color: rgba(210, 105, 30, 0.5);
}

.green {
  border: 2.5px solid rgb(76, 210, 30);
  background-color: rgba(76, 210, 30, 0.5);
  position: absolute;
  top: 50%;
}

.purple {
  border: 2.5px solid rgb(103, 30, 210);
  background-color: rgba(103, 30, 210, 0.5);
}

Suppose you used absolute CSS positioning to manipulate the default layout of the "Green" list item. In that case, browsers will display the HTML document out of flow like so:

http://localhost:3000

Hello there! 👋 I am CodeSweetly

My favorite colors are:

1. Chocolate

3. Purple

2. Green

Try it on StackBlitz

In other words, a normal flow CSS layout makes browsers display a page's elements precisely as you arranged them in the source code. But you take a document out of flow once you alter its default layout.

Overview

A well-structured HTML document is one that you can easily read in its normal flow. Moreover, such web pages are accessible to screen readers and users with limited browser features.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article