CSS - Flow

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:

inline directionblockdirectionhorizontalwriting modeEnglish▼ left / inline-start sideright / inline-end side ▼top / block-start side ▼bottom / block-end side ▲width / inline-sizeheight / block-size

block directioninlinedirectionverticalwriting mode中文▼ left / block-end sideright / block-start side ▼top / inline-start side ▼bottom / inline-end side ▲width / block-sizeheight / inline-size

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:

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





Discover More
CSS - Block And Inline Layout (Block Formatting context)

CSS - Block And Inline Layout (Block Formatting context) CSS Block and inline layout is the first layout model of CSS. It's also known as: * block formatting * flow layout The component are laid...
Css Flex Align Content
CSS - Flex Box

flex is a layout model that lays out object in a single axis focused on space distribution and content alignment. flex means: flexible layout as flexible size Flex layout is superficially similar...
CSS - Float (box|property) (Layout)

CSS Float is a property of a block box. It shifts a box to the left or right on the current line and create a new position context. flexbox The most interesting characteristic of a float (or “floated”...
Flex Vs Grid Css
CSS - Layout Mode (Visual Formatting Model)

This page is the layout available in CSS. A layout system is an algorithm which determine the size and position of boxes based on their relationships with their sibling and ancestor boxes: In Css,...
CSS - The containing box

The containing box is a box that is used in the positioning of element on the page
CSS Position - Normal Flow (Static > Static Positioning)

When the container and the child box has the default position value (ie static), we speak of this situation has been the normal flow. Basically, the elements appear on the page as they appear in source...



Share this page:
Follow us:
Task Runner