CSS Box and Inline Layout - Flow / Directions


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



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 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:

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);

Powered by ComboStrap