ptb2.me

Flex Containers

Flexible boxes, also called flex containers, are created by setting the display property on a container element. Properties are listed here in a specific order with the working draft syntaxes first and the current candidate recommendation standard syntax last.

Main Axis Orientation and Direction

These properties specify how items are placed in the container, by setting the orientation and direction of the container's main axis.

Single- or Multi-Line and Cross Axis Direction

These properties control whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.

Direction and Wrap Shorthand Property

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the main and cross axes.

Change Display Order

Flexbox items are, by default, displayed and laid out in the same order as they appear in the source document. These properties may be used to change this ordering.

Flexibility

The defining aspect of flex layout is the ability to make the flex items "flex", altering their width or height to fill the available space. This is done with these properties. A flex container distributes free space to its items proportional to their flex-grow factor, or shrinks them to prevent overflow proportional to their flex-shrink factor.

Main Axis Alignment and Extra Space Distribution

These properties align flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved.

Cross Axis Alignment

Flex items can be aligned in the cross axis of the current line of the flex container, similar to the previous section but in the perpendicular direction. These properties are applied to the flex container.

These properties also affect alignment in the cross axis of the current line of the flex container, but these properties are applied to the items inside the flex container to override the container property.

Cross Axis Extra Space Distribution

These properties align a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content and box/flex-pack aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line.