Justify Content

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 'main-axis', which means:

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

Value Description
flex-startDefault. Items are left aligned if flex-direction is set to 'row'. Or top aligned if flex-direction is set to 'column'.
centerItems are centered inside the container
flex-endItems are right aligned if flex-direction is set to 'row'. Or bottom aligned if flex-direction is is set to 'column'.
space-betweenItems are spaced, but flush against the edges of the container.
space-aroundItems are spaced, and there is space between the items and the edges of the container.

Themeover CSS Reference

Close