Back to Home

Main Axes & Cross Axes

Understanding the fundamental concept of main and cross axes in Flexbox layouts.

What are the Main Axes and Cross Axes?

In Flexbox, the main axes and cross axes are the two primary axes that determine how flex items are laid out:

  • Main Axes: The primary axes along which flex items are laid out. It's defined by the flex-direction property.
  • Cross Axes: The axes perpendicular to the main axes. If the main axes is horizontal, the cross axes is vertical, and vice versa.

Interactive Axes Visualization

See how the main axes and cross axes change based on the flex-direction property.

1
2
3
Main Axes
Cross Axes
flex-direction: row

With flex-direction: row, the main axes runs horizontally from left to right, and the cross axes runs vertically from top to bottom.

Properties that work on the main axes:

  • justify-content - Aligns items along the main axes
  • flex-grow - Controls how items grow along the main axes
  • flex-shrink - Controls how items shrink along the main axes
  • flex-basis - Sets the initial size of items along the main axes

Properties that work on the cross axes:

  • align-items - Aligns all items along the cross axes
  • align-self - Aligns individual items along the cross axes
  • align-content - Aligns multiple lines along the cross axes (when flex-wrap is enabled)

Why Understanding axes is Important

Understanding the main axes and cross axes is crucial for mastering Flexbox because:

  • Property Selection: Different properties affect different axes. For example, justify-content works on the main axes, while align-items works on the cross axes.
  • Layout Direction: Changing flex-direction swaps which axes is the main axes and which is the cross axes.
  • Responsive Design: You can easily switch between row and column layouts for different screen sizes by changing the main axes.
  • Debugging: When layouts don't behave as expected, understanding which properties affect which axes helps identify the issue.

HTML and CSS Examples

<!-- HTML -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

/* CSS - Row (default) */
.container {
  display: flex;
  /* Main Axes: horizontal (left to right) */
  /* Cross Axes: vertical (top to bottom) */
  
  /* Main Axes alignment */
  justify-content: space-between;
  
  /* Cross Axes alignment */
  align-items: center;
}

/* CSS - Column */
.container {
  display: flex;
  flex-direction: column;
  /* Main Axes: vertical (top to bottom) */
  /* Cross Axes: horizontal (left to right) */
  
  /* Main Axes alignment (now vertical) */
  justify-content: space-between;
  
  /* Cross Axes alignment (now horizontal) */
  align-items: center;
}