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
stretch
Default. 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-start
Items are top aligned if flex-direction is set to 'row'. Or left aligned if flex-direction is set to 'column'
center
Items are centered inside the container
flex-end
Items are bottom aligned if flex-direction is set to 'row'. Or right aligned if flex-direction is is set to 'column'.
baseline
Items 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.
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'.
Themeover CSS Reference
Online CSS References: Align Items