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 property of the container should be set to either flex (block-level) or inline-flex (inline). The latter results in the container being displayed as inline. Both ensure that the contained elements will be arranged in a flexible box.

Direction

---

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 axis 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 element 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.