CSS Box and Inline Layout - Flow / Directions

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

• the block
• the inline

Example:

• With Left-To-Right language such as english ³⁾

• With Top-To-Bottom language such as chinese ⁴⁾

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:

• floated,
• positioned (absolute or relative),
• 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);