HTML and CSS Reference
In-Depth Information
To eliminate ambiguity when dealing with so many options, the W3C has created specific terminology to
describe the main components of flex layout. Knowing what the terms refer to is important in understanding the
values used for key properties in flex layout.
Figure
22-3
shows a diagrammatic representation of a flex container for a left-to-right language where the
flex items are displayed in one or more rows.
Main axis
Flex container
Flex item
Flex item
Figure 22-3.
A flex container has a main axis and a cross axis
The
<section>
element in books1.html and books2.html is an example of this sort of flex container. It
contains three flex items, the
<article>
elements that describe the topics. In terms of flex layout terminology,
they run across the flex container's
main axis
. In a right-to-left language, the main axis runs in the opposite
direction. The container's
cross axis
runs perpendicular to the main axis.
In addition to being flex items, the
<article>
elements are flex containers in their own right, and they
display their contents as a column. As Figure
22-4
shows, the main axis of a flex container that displays flex items
in columns runs from the top to the bottom of the container, and the cross axis runs from left to right.
Flex item
Cross axis
Flex container
Flex item
Figure 22-4.
When flex items are displayed in columns, the main and cross axes are transposed
The following terms are used to refer to the different parts and dimensions of flex containers and flex items
(Figure
22-5
shows them on a flex container where the main axis runs left to right):
Main axis:
The primary axis along which flex items are laid out. When the items are
laid out in rows, it runs from left-to-right in English and other European languages. For
columns, it runs from top to bottom.
Main-start:
The side of the flex container where the main axis begins.
Main-end:
The side of the flex container where the main axis ends.
Main size:
The size of a flex item or container measured along the main axis. In a row,
it's the item's width. In a column, it's the item's height.
Cross axis:
The axis perpendicular to the main axis is called the cross axis.
Cross-start:
The side of the container where the cross axis begins. When the flex items
are laid out in rows, it's the top. When they're laid out in columns in a left-to-right
language, it's the left side.
