Visit Pixel Rocket

Justify Content - Start

See how justify-content controls spacing and alignment along the main axis.

See Finish Next: Align Items

flex-start (default)

Item 1
Item 2
Item 3

Items are packed toward the start of the main axis

flex-end

Item 1
Item 2
Item 3

Items are packed toward the end of the main axis

center

Item 1
Item 2
Item 3

Items are centered along the main axis

space-between

Item 1
Item 2
Item 3

Items have equal space between them, no space at edges

space-around

Item 1
Item 2
Item 3

Items have equal space around them (half space at edges)

space-evenly

Item 1
Item 2
Item 3

Items have equal space between and around them

Key Takeaways

  • justify-content controls spacing along the main axis
  • Main Axis Distribution Values:
    • flex-start - Items packed to start (default)
    • flex-end - Items packed to end
    • center - Items centered
    • space-between - Equal space between items
    • space-around - Equal space around items
    • space-evenly - Equal space everywhere
  • When you change flex-direction, the justify-content behavior follows the new main axis direction
  • Understanding how justify-content responds to axis changes is crucial for responsive layouts