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.

Tip

• Normal flow is sometimes called “flow layout.”
• A well-structured HTML document is one that you can easily read in its normal flow. Such web pages are accessible to screen readers and users with limited browser features.

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

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.