Flex container and flex item terminology

Summary

In Flexbox, the element with `display: flex` applied is called the flex container. Its direct children are automatically converted into flex items and are laid out in one dimension, either in a row or a column. A flex container behaves as block-level content by default, while `display: inline-flex` makes the container itself participate in an inline layout. Flex items are arranged along two axes. The main axis follows the direction specified by `flex-direction`, such as a row or column, and its endpoints are the main start and main end. The cross axis runs perpendicular to the main axis, with endpoints called the cross start and cross end. The size of a flex item along these axes is called its main size and cross size, respectively.

Key Points

• 1

  Applying `display: flex` to an element creates a flex container and makes its direct children flex items.

• 2

  The main axis is the direction in which flex items are laid out; `flex-direction` controls whether this is a row, column, or reversed direction.

• 3

  The cross axis is perpendicular to the main axis, and alignment properties such as `align-items` operate along it.

• 4

  The main start and main end mark the beginning and end of the main axis; cross start and cross end mark the beginning and end of the cross axis.

• 5

  A flex item's main size is its length along the main axis, while its cross size is its length along the cross axis.