CSS3 - Flexbox - Aligning items

09 Feb 2017

Flexbox is a two-dimensional layout entity. It provides features like reordering of elements without changing the DOM, easy vertical centering and it let's you specify how elements are to be resized in case there is too much space or not enough space.

Aligning items along the main-axis with justify-content

justify-content sets how flex-items are to be aligned along the main-axis (which is left to right in these examples)

justify-content:flex-start (default)

See the Pen mRzpjM by Jan Reinsch (@coded-aesthetics) on CodePen.

justify-content:flex-end

See the Pen bgmaxK by Jan Reinsch (@coded-aesthetics) on CodePen.

justify-content:center

See the Pen GrYyYO by Jan Reinsch (@coded-aesthetics) on CodePen.

justify-content:space-between

See the Pen qRJpQN by Jan Reinsch (@coded-aesthetics) on CodePen.

justify-content:space-around

See the Pen NdOXEL by Jan Reinsch (@coded-aesthetics) on CodePen.

All this also works with flipped axes. Here is just one example:

See the Pen xgypMV by Jan Reinsch (@coded-aesthetics) on CodePen.

Aligning items along the cross-axis with align-items

align-items sets how flex-items are to be aligned along the cross-axis (which is top to bottom in these examples)

align-items:stretch (default)

See the Pen mRzpYp by Jan Reinsch (@coded-aesthetics) on CodePen.

align-items:center

See the Pen QdZQLo by Jan Reinsch (@coded-aesthetics) on CodePen.

Which is exactly how you vertically align items with flexbox…

align-items:flex-start

See the Pen MJPrMN by Jan Reinsch (@coded-aesthetics) on CodePen.

align-items:flex-end

See the Pen EZdQYK by Jan Reinsch (@coded-aesthetics) on CodePen.

align-items:baseline

See the Pen bgmLdO by Jan Reinsch (@coded-aesthetics) on CodePen.

This aligns items so that the baseline of the contained texts are on one line.

Aligning individual items with align-self

align-self is set on flex-items and overrides the align-content property that has been set on the flexbox.

See the Pen LxgQNL by Jan Reinsch (@coded-aesthetics) on CodePen.

In the above example, only box3 is aligned by align-items. All other boxes override this property by setting align-self.

Align-content = justify-content for the cross-axis.

Settings align-content has the same effect as justify-content, but for the cross-axis instead of the main-axis. This will only have an effect if there is any wrapping, so flex-wrap:wrap(-reverse) needs to be set.

align-content:stretch (default)

See the Pen egPVez by Jan Reinsch (@coded-aesthetics) on CodePen.

align-content:flex-start

See the Pen oBaEEE by Jan Reinsch (@coded-aesthetics) on CodePen.

align-content:flex-end

See the Pen jyeZzE by Jan Reinsch (@coded-aesthetics) on CodePen.

align-content:space-around

See the Pen PWyQRV by Jan Reinsch (@coded-aesthetics) on CodePen.

align-content:space-between

See the Pen rjqJvW by Jan Reinsch (@coded-aesthetics) on CodePen.