Flexbox

Examples

HTML

CSS

See the Pen Demo Flexbox 3 by CSS-Tricks (@css-tricks) on CodePen.

Container styles

Display

This defines a flex container.

Flex-direction

This establishes the main-axis.

Flex-wrap

Allow the items to wrap as needed.

Flex-flow

This is a shorthand flex-direction and flex-wrap properties. Default is row nowrap.

Justify-content

This defines the alignment along the main axis.

Align-items

This defines the default behaviour for how flex items are laid out along the cross axis.

Align-content

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Child styles

Order

This controls the order in which they appear in the flex container.

Flex-grow

This defines the ability for a flex item to grow if necessary.

Flex-shrink

This defines the ability for a flex item to shrink .

Flex-basis

This defines the default size of an element before the remaining space is distributed.

Flex

Shorthand for flex-grow, flex-shrink and flex-basis.

Align-self

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.