Skip to main content

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:

<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>

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:

<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>

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.