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:

div {
  display: flex;
}

Justify-content

div {
  display: flex;
  justify-content: space-between;
}

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

Space-between

Space-around

Space-evenly

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

Align-items

div {
  display: flex;
  align-items: center;
}

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

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

div {
  display: flex;
  flex-direction: column;
}

Set direction of main axis.

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

Row (default)

Row-reverse

Column

Column-reverse

Flex-wrap

div {
  display: flex;
  flex-wrap: wrap;
}

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

Wrap-reverse

Same as wrap, except lines are in reversed order.

Flex-grow

div {
  display: flex;
}

div .flex-item {
  flex-grow: 2;
}

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.)