CSS Flexbox

Download (.odt) Download (Markdown)

A CSS feature to position multiple items inside a container (parent) along main axis (along which items are laid out, horizontal by default) and cross axis (vertical by default).

Parent element has the following rule set:

Justify-content

[hook]

Position items along main axis.

Possible values: flex-start, flex-end, center, space-between, space-around, space-evenly.

Flex-start (default)

Items are positioned to the start of main axis.

Flex-end

Items are positioned to the end of main axis.

Center

Items are positioned to the center of main axis.

Space-between

Items are distributed along main axis, with same amount of whitespace between them.

Space-around

Items are distributed along main axis, with whitespace around them. Whitespace between two elements is twice as much as at the start and end of main axis.

Space-evenly

Items are distributed along main axis, with the same amount of whitespace around them.

Align-items

[hook]

Position items along cross axis.

Possible values: normal/stretch, flex-start, flex-end, center, baseline.

Normal/stretch (default)

Items are stretched to fit the length of cross axis.

Flex-start

Items are positioned to the start of cross axis.

Flex-end

Items are positioned to the end of cross axis.

Center

Items are positioned to the center of cross axis.

Baseline

Items are positioned so that their contents are aligned with each other. One of them is positioned to the start of cross axis.

Flex-direction

[hook]

Set direction of main axis.

Possible values: row, row-reverse, column, column-reverse.

Row (default)

Main axis is horizontal, left-to-right.

Row-reverse

Main axis is horizontal, right-to-left.

Column

Main axis is vertical, up-to-down.

Column-reverse

Main axis is vertical, down-to-up.

Flex-wrap

[hook]

Set whether items should be wrapped into a new line or not, if can't fit all of them into one.

Possible values: nowrap, wrap, wrap-reverse.

Nowrap (default)

Items are shrunk as much as possible, then they overflow the container.

Wrap

Items aren't shrunk, they are wrapped into a new line if overflow.

Wrap-reverse

Same as wrap, except lines are in reversed order.

Flex-grow

[hook]

A property for flex item to set how much it can grow compared to other items.

It can have any (zero or positive) number as value. Default value is 0.

First item with flex-grow 0 takes the width of its content, the second one has flex-grow 1, the third one with flex-grow 2 is twice as big as the second one, the fourth one with flex-grow 3 is three times as big as the second one.

(First item takes the width of its content, third is twice as big as second, fourth is three times as big.)