About
The flow 1) 2) is the direction of a block and inline layout against which the elements are positioned.
Coordinate System
This layout uses the concept of containing box as coordinate system.
This containing box depends on property of the box such as
- float for a block box will extract the box of the normal flow to position it at the left or right side
- position property: Absolute or relative positioning
Glossary
Normal
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:
- With Left-To-Right language such as english 3)
- With Top-To-Bottom language such as chinese 4)
The term relative to the block and inline directions are:
- for the block flow direction:
- block-start: the first side
- block-end: the last side
- for the inline flow direction:
- inline-start: the first side
- inline-end: the last side
Out/In Flow
An block box is called out of flow if it is:
- or is the root element.
An element is called in-flow if it is not out-of-flow.
When a element is out-of-flow, it means that:
- it got another containing box than the body
- the containing box is not the body
Html
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);