Align Items

Items are aligned along the 'cross-axis', which means:

Vertical alignment if flex-direction is set to 'row' (default) or 'row-reverse'.
Horizontal alignment if flex-direction is set to 'column' or 'column-reverse'.

Value Description
stretchDefault. Items are stretched to fit the container (vertically if flex-direction is set to 'row' (default), horizontally if flex-direction is set to 'column')
flex-startItems are top aligned if flex-direction is set to 'row'. Or left aligned if flex-direction is set to 'column'
centerItems are centered inside the container
flex-endItems are bottom aligned if flex-direction is set to 'row'. Or right aligned if flex-direction is is set to 'column'.
baselineItems are aligned according to the text baseline. This only becomes distinguishable from flex-start if the font-size of flex items varies. Here is a good demonstration of align-items: baseline.

Themeover CSS Reference

Close