Align Items

Published: October 6, 2017By brooklynwriters
  • Display (flex)
  • Flex Direction
  • Flex Wrap
  • Justify Content
  • Align Items
  • Align Content
  • Column gap
  • Row gap
  • Flex Grow
  • Flex Shrink
  • Flex Basis
  • Align Self
  • Order

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