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.

Example: Normal Flow Demonstration

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

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


Hello there! 👋 I am CodeSweetly

My favorite colors are:

  1. Chocolate
  2. Green
  3. Purple

In other words, a normal flow CSS layout makes browsers display a page's elements precisely as you arranged them in the source code.


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.