CSS Flexbox Cheatsheet

Flexbox Container

display

Enables a flex container; inline or block.

flex-direction

Specifies the direction of the flexible items.

flex-wrap

Specifies whether the flex items should wrap or not.

justify-content

Property is used to align the flex items.

align-items

Determines the behavior for how flex items are laid out along the cross axis on the current line.

align-content

Aligns a flex container’s lines within when there is extra space in the cross-axis.

Flexbox children

order

Controls the order in which flex items appear in the flex container.

flex-grow

Allows you to define the ability for a flex item to grow.

flex-basis

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

flex-shrink

This defines the ability for a flex item to shrink.

align-self

Sets the alignment for individual items.