The flex-wrap property controls 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.

]]> The flex-flow property is a shorthand for setting the and properties, which together define the flex container’s main and cross axes.

]]> The order property controls the order in which children of a flex container appear within the flex container, by assigning them to ordinal groups. It takes a single <integer> value, which specifies which ordinal group the flex item belongs to.

]]> The flex property specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis. When a box is a flex item, flex is consulted instead of the main size property to determine the main size of the box. If a box is not a flex item, flex has no effect.

]]> The flex-grow property sets the flex grow factor to the provided <number>. Negative numbers are invalid.

]]> The flex-shrink property sets the flex shrink factor to the provided <number>. Negative numbers are invalid.

]]> The flex-basis property sets the flex basis. It accepts the same values as the and property, plus content.

]]> The justify-content property aligns 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. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

]]> The CSS align-items property aligns flex items of the current flex line the same way as justify-content but in the perpendicular direction.

]]> Flex items can be aligned in the cross axis of the current line of the flex container, similar to but in the perpendicular direction. sets the default alignment for all of the flex container’s items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of on their associated flex container.)

]]> The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how aligns individual items within the main-axis. Note, this property has no effect on a single-line flex container. Values have the following meanings:

]]>