The default layout algorithm in CSS is called normal flow. The browser processes the elements in the sequence they are encountered in the HTML document. If the element has an inline display, the browser tries to insert it just after its inline predecessor. If there's not enough room in the current line, the browser wraps it to the next line. If the element has a block display, it is given its own line.
Under normal flow, then, the browser arranges elements from left to right and then top to bottom. This animation illustrates how the browser fills the viewport, with inline elements colored coral and block elements colored cornflower:
Whenever there's extra space, it always appears at the end of a line.
Left-to-right flow is the default, which accommodates speakers of English, Spanish, German, Russian, French, and many other languages. Languages like Arabic, Hebrew, Pashto, Persian, and Urdu flow from right to left. You can support these languages by setting the CSS direction property to rtl.
The normal flow algorithm worked well enough when content was primarily text. Those days are gone. Today entire applications are written to run in a browser, and their interfaces require more control over the layout. One way to have more control is to use a flexible box layout. This new layout algorithm, which is called Flexbox, was first introduced in 2009.
Flexbox gives you power over how child elements are laid out in a one-dimensional flow across their parent element. You have control over these four characteristics of a Flexbox layout:
Each of these characteristics and the CSS properties used to influence them will be examined in detail.