A Flexbox consists of:
- A Flex Container – the parent element with the CSS property: display:flex;
- Flex Items – the direct children of the flex container
A flexbox allows the items in a container to have flexible widths and heights to optimise the use of space on the screen and distribute space within the container.
The layout of a flexbox has two perpendicular axes:
- the main axis – the primary axis that the flex items are laid out on.
- the cross axis – the axis perpendicular to the main axis.
The flex direction establishes the main axis, which defines whether the flex items appear in horizontal rows or vertical columns.
Flexbox is a one-dimensional layout. If there is not enough available space on the screen the items can be set to wrap onto a new row (or column). You can read more about flexbox here.