CSS Flexbox layout

Set the property:

display: flex;

The element is turned into a flexbox.

flex-grow: <n>;

Set the element growing factor after the available positive free space is distributed. Width set for the items is honored. It is relative to the other flex elements (defaults to 0).

flex-shrink: <n>;

Set the element shrinking factor after the negative free space is distributed. It has the same characteristics as flex-grow.

flex-basis: <n>;

Set the initial size of the flex element. Applies before free space is distributed.

Since flexbox is mono-directional, nest containers if elements need to be laid out horizontally and vertically.

flex-direction: <row | column>;

Set the direction along which the elements are laid out. Defaults to row.

justify-content: flex-start | flex-end | center | space-between | space-around;

Aligns items along the main flexbox axis (set flex-grow to 0).

align-content: flex-start | flex-end | center | space-between | space-around;

Aligns items along the perpendicular flexbox axis (set flex-grow to 0).

align-items: <flex-start | flex-end | center | baseline | stretch>;

Align items along the cross axis (that is, the axis opposite to the main axis). Defaults to stretch.

align-self: <flex-start | flex-end | center | baseline | stretch>;

Per item alignment.

order: <n>;

Sets the order by which items are displayed. Defaults to 0.

flex-direction: <row | row-reverse | column | column-reverse>;

Sets the direction of the flex items. Defaults to row.

flex-wrap: <nowrap | wrap | wrap-reverse>;

Sets the way wrapping is handled. Defaults to nowrap: items just shrink.