CSS - Layout Mode (Visual Formatting Model)

About

This page is about the layout available in CSS.

System

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, a box may be laid out according to the following positioning schemes:

  • Block and Inline Layout known also as:
    • flow layout
    • block formatting content
  • System Layout (Table, Flex, Grid)
Name Designed for Coordinates (according to) Flow
Flow Layout (block-and-inline layout)
block layout laying out block of text (section, paragraph, …) with regards to reading box flow directions Normal flow
inline layout laying out text box flow directions Normal flow
positioned layout explicit positioning without much regard for other elements in the document Containing block Out flow
System Layout
table layout laying out 2D data in a tabular format -
flex layout laying out container objects in a single axis flex direction (horizontal/vertical) (single-axis placement) -
grid laying out container objects in two-dimensional axis double-axis placement

Flex vs Grid

Flex Vs Grid Css 1)

Properties

Ultimately, there is only a subset of property that drives a layout system.

You can find them back in the browser devtool in the style section.

Css Layout Properties

Documentation / Reference





Discover More
Firebug Display
CSS - (Display property|Box Type)

The display property defines the box model (layout) type. inline: Default value. Displays an element as inline element. Rules in the user agent's default style sheet may override this value block...
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 - Block Box Layout

CSS - Block Box Layout CSS Block are box that can be seen as stacked element (such as paragraphs, section, ...) Block boxes: * create a block formatting context (layout) * and are involved in any...
CSS - Block Level (element|box)

Block-level refers to the (HTML) elements that are formatted visually as blocks. See for more information: Except for table boxes, and replaced elements, a block-level box can also be a block container...
Boxdim
CSS - Box Size

CSS Sizing of a box The width and the height of a box are dependent of the: layout and of the box sizing parameters The sizes are calculated with respect to the edges of a rectangular box called...
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
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...
Grid Form With Horizontal Vertical Alignment
CSS - Grid

grid is a CSS layout system that provides a mechanism: to divide the available space into columns and rows (two-dimensional grid) to position into one or more intersections an html element (known...
Css Box Size Content
CSS - Height of a box

This page is the height of a box. From How it's calculated To How it's defined HTMLheight attributeHTMLimage...div element When a absolute length value is set, the value applied directly...
CSS - Inline Box

CSS Inline is a layout used to layout inline xml element (ie text formatting context) It's used in differents formatting context: the block level as an the flex level as also its ... An inline-level...



Share this page:
Follow us:
Task Runner