Flexible box layout

This type of layout consists of properties for the container and properties for the elements that are contained. Working together, the properties indicate the order in which the contained elements appear, how much they can grow or shrink, how they are aligned with respect to each other, and how they behave when they wrap to another line.

Properties for the container

To use flexible box layout, the display propertyA property that controls how an element is displayed, with values such as inline, block, inline-block, flex, inline-flex, and none. of the container should be set to either flex (block-levelDisplay of an element on a new line to take the whole horizontal space.) or inline-flex (inlineDisplay of an element on a line with other elements.). The latter results in the container being displayed as inline. Both ensure that the contained elements will be arranged in a flexible box.

Direction

directions

Values for flex-direction

axes

Main and cross axes


The choice of the main axis (horizontal or vertical) and direction (left to right, right to left, top to bottom, bottom to top) are specified using the flex-direction property (flex-direction). The value row is the default value.

The axis that is not the main axisThe axis (horizontal or vertical) with respect to which flexible box layout elements are positioned. is called the cross axis.

Value Main axis Direction Cross axis
row (default) horizontal left to right vertical
row-reverse horizontal right to left vertical
column vertical top to bottom horizontal
column-reverse vertical bottom to top horizontal

Wrap

The flex-wrap property (flex-wrap) determines whether or not wrapping to a new line takes place, and whether the direction is reversed. The values are:

  • nowrap
  • wrap
  • wrap-reverse

For example, a division elementAn element used to group elements on different lines. might be styled in the following way:

div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

Properties for the contained element

The flex property (flex) specifies one to three values, with the following meanings, in order:

  • The proportion of available space in the container that the element should take up, should elements expand to take up space. (Expressed as a number of size at most 1.)
  • The proportion to be used if the element needs to shrink. (Optional, with default value 1.)
  • The default size of the element prior to being alloted extra space. (Optional, with default value auto.)

Not all of the functionality is listed here; if you are interested in more information, please see the Help page for further resources.