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

Values for flex-direction

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.