CSS - Layout Mode (Visual Formatting Model)

About

This page is about the layout available in CSS.

A layout mode 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.

Name Designed for Coordinates (according to) Flow
block layout laying out documents box flow directions Normal flow
inline layout laying out text box flow directions Normal flow
positioned layout very explicit positioning without much regard for other elements in the document Containing block Out flow
table layout 2D data in a tabular format -
flex layout more complex applications and webpages flex direction (horizontal/vertical) -
grid

Documentation / Reference


Powered by ComboStrap