CSS - Flow


The flow is the direction in which box are positioned.

This flows 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
  • wrap for a flex box that permits the box that overflow to go the next line
  • CSS - Position Property: Absolute or relative positioning
  • ….

If the text or child box does not fit in a box, the content may overflow.

See also HTML - (Flow|Body) Content



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

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.

Flow-relative directional terms

Interpreted relative to the flow of content. The flow-relative directions are:

  • start and end,
  • or block-start, block-end,
  • inline-start, and inline-end if the dimension is also ambiguous.


CSS layout that are laid out according to a flow are:

They uses then the concept of containing box as coordinate system.

Documentation / Reference

Powered by ComboStrap