The CSS flexible box, also called flexbox, is a layout model that is intended to allow Web authors to arrange elements on a page such that they respond predictably or as intended to changes in screen sizes. In particular, it largely eliminates the use of the float and clear properties (introduced in Chapter 12), which can be cumbersome and difficult for some to understand. In order to use flexbox effectively, it is useful to be familiar with the anatomy of the model and the terminologies used to describe its components, as this helps to better understand the functions of flexbox properties.
The central principle of the model is to give a container element (known as a flex container) the ability to change the size of its child elements (known as flex items) in a way that best fills the available space. Text that is directly contained in a flex container, known as an anonymous flex item, is also controlled. Figure 19.1 illustrates the anatomy of the model from the viewpoint of content that flows left to right and top to bottom.
FIGURE 19.1 The anatomy of the flexbox layout model for left-to-right-top-to-bottom writing.
Flex items are laid out along the main axis in the container starting at the main- start edge and going toward the main-end edge. The main axis goes in the same direction as the inline axis, which is horizontal or vertical, depending on writing mode, and represents the direction in which inline- level content flows. A line of flex items is contained in what is known as a flex line. Flex lines are laid out along the cross axis in the container, starting at the cross-start edge and going toward the cross-end edge. The cross axis essentially goes in the same direction as the block axis (which is vertical or horizontal, depending on writing mode) and represents the direction in which block-level content flows. The directions of the main axis (i.e., main dimension) and that of the cross axis (i.e., cross dimension) go in the same ways as the current writing mode and determine whether an edge is the main-start, main-end, cross-start, or cross-end edge. Also, whether main size or cross size represents the width or height of an item depends on these dimensions. This is because the flexbox layout model is used to represent multiple directions of content flow, such as left to right, right to left, and top to bottom.
A flex container can be single-line or multi-line, depending whether or not lines are wrapped. It is single-line if it has only one line of flex items that is not broken, even if the line overflows the container’s edge. It is multi-line if the lines of items are broken into multiple lines, the same way that text is wrapped onto multiple lines in a document. With the flexbox properties, it is possible to achieve many layout goals easily, such as:
- Center an element inside a page.
- Make elements or containers flow horizontally or vertically in any order.
- Create a row of elements, such as buttons, that collapses vertically on smaller screens.
A flex container can be defined as a block-level or an inline-level container and created by assigning flex or inline-flex value to the display property (discussed in ), respectively. For example, the display: flex; declaration says to make the element to which it is applied a block-level flex container and display: inline-flex; says to make it an inline-level flex container. Once created, elements inside a flex container automatically become flex items and are laid out along the direction of the main axis or the cross axis. Some flexbox properties apply only to the flex container and affect all the items inside it, while others apply only to individual flex items.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.