The flow 1) 2) is the direction of a block and inline layout against which the elements are positioned.
This layout uses the concept of containing box as coordinate system.
This containing box depends on property of the box such as
The normal flow is the default flow behavior. It's given by the static value of the position property. See CSS Position - Normal Flow (Static > Static Positioning)
In the normal flow, there is two directions that depends on the language direction
Example:
The term relative to the block and inline directions are:
An block box is called out of flow if it is:
An element is called in-flow if it is not out-of-flow.
When a element is out-of-flow, it means that:
The html flow elements have this layout by default set via the display property
<p>A paragraph with <span>an inline span</span></p>
let p = document.querySelector("p");
let pDisplay = window.getComputedStyle(p).getPropertyValue('display');
console.log('The display of p is '+pDisplay);
let span = document.querySelector("span")
let spanDisplay = window.getComputedStyle(span).getPropertyValue('display');
console.log('The display of span is '+spanDisplay);