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>
Buy sketchbook for web design, app development, software engineering

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.