Visit Pixel Rocket

Core Concepts - Start

Understand the fundamentals of Flexbox axes and directions. This example shows how flex-direction controls which axis is the main axis and how items flow within flex containers.

See Finish Next: Justify Content

Row Direction (Default)

Item 1
Item 2
Item 3

Main Axis: Left to Right →

Cross Axis: Top to Bottom ↓

Column Direction

Item 1
Item 2
Item 3

Main Axis: Top to Bottom ↓

Cross Axis: Left to Right →

Row Reverse

Item 1
Item 2
Item 3

Main Axis: Right to Left ←

Column Reverse

Item 1
Item 2
Item 3

Main Axis: Bottom to Top ↑

Flexbox Axis (Default)

Main Axis
justify-content
flex-grow
flex-shrink
flex-basis
Cross Axis
align-items
align-content
align-self

Flexbox Axis (Switched)

Cross Axis
align-items
align-content
align-self
Main Axis
justify-content
flex-grow
flex-shrink
flex-basis

Key Takeaways

  • flex-direction determines the direction of the main axis
  • Main Axis Properties:
    • justify-content - Controls spacing and alignment along the main axis
    • flex-grow - Applied to flex items
    • flex-shrink - Applied to flex items
    • flex-basis - Applied to flex items
  • Cross Axis Properties:
    • align-items - Controls how items align within their row/column
    • align-content - Controls how rows/columns align when items wrap
    • align-self - Overrides align-items for individual items
  • If you switch the main axis, you switch the direction of the properties for the main axis.
  • Understanding which properties go with which axis, and the impact that switching the main axis has on those properties, is the key to mastering flexbox layouts