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.
Normal flow is sometimes called "flow layout".
Example 1: Normal Flow Layout
Consider the following code:
- HTML
- CSS
<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>
.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:
Hello there! 👋 I am CodeSweetly
My favorite colors are:
- Chocolate
- Green
- Purple
Example 2: Out of Flow Layout
Consider the following code:
- HTML
- CSS
<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>
.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:
Hello there! 👋 I am CodeSweetly
My favorite colors are:
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.