Flex container and flex item terminology

Summary

In Flexbox, the element with display: flex is called the flex container, while its direct children are called flex items. The flex container controls how its flex items are arranged, sized, aligned, wrapped, and ordered. By default, a flex container behaves as block-level content, although display: inline flex can make the container itself participate in inline layout. Flex items are arranged along two axes. The main axis follows the direction specified by flex-direction, which defaults to row, while the cross axis runs perpendicular to it. The starting and ending points are called main start/main end and cross start/cross end. An item's length along these axes is called its main size and cross size, respectively.

Key Points

• 1

  Applying display: flex to an element makes it a flex container and converts its direct children into flex items.

• 2

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

• 3

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

• 4

  The terms main start, main end, cross start, and cross end describe the beginning and end points of the two axes.

• 5

  A flex item can also be a flex container, allowing nested Flexbox layouts.