Understanding the Main Axis Fundamentals
The main axis is the primary axis along which flex items are laid out within a flex container. It is important to understand that the main axis is not always horizontal, contrary to what many beginners assume. Instead, the direction of the main axis is determined entirely by the flex-direction property, which gives developers precise control over the layout direction according to MDN's flexbox documentation.
When you create a flex container by applying display: flex or display: inline-flex to an element, you establish a new formatting context for its direct children. These children become flex items, and their layout behavior is governed by the flexbox specification. The main axis defines the primary direction in which these items flow, while the cross axis runs perpendicular to it, creating a two-dimensional layout system that offers unprecedented control over alignment and distribution as explained in CSS-Tricks' Flexbox guide.
The concept of axes in flexbox replaces the traditional notions of horizontal and vertical that governed older CSS layout techniques. This abstraction allows flexbox to work naturally with different writing modes and text directions, making it a truly international layout system.
Mastering the main axis is essential for professional web developers building responsive, accessible layouts that work across all devices and languages.
Each value produces a distinct layout behavior
row
Horizontal main axis running left to right in LTR languages. Items flow from main-start (left) to main-end (right). This is the default value.
row-reverse
Horizontal main axis flowing from right to left. First item appears at the right edge, subsequent items flow toward the left.
column
Vertical main axis running top to bottom. Items stack vertically, flowing from main-start (top) to main-end (bottom).
column-reverse
Vertical main axis flowing from bottom to top. Items start at the bottom and stack upward.
Start and End Lines
Understanding the concepts of main-start and main-end is crucial for working effectively with the main axis. These conceptual lines define where flex items begin and end their placement within the container. The position of these lines depends entirely on the writing mode and the flex-direction value in use as defined in the flexbox specification.
In a left-to-right context with flex-direction: row, the main-start edge corresponds to the left side of the container, and the main-end edge corresponds to the right side. Items begin at the left edge and flow toward the right edge. This mapping changes when you use row-reverse, flipping the start and end positions so that items begin at the right edge and flow toward the left.
For vertical layouts using flex-direction: column, the main-start edge corresponds to the top of the container, and the main-end edge corresponds to the bottom. Items begin at the top and flow downward. Using column-reverse swaps these positions, starting items at the bottom and flowing upward.
| Flex-Direction | Main Axis Direction | Main-Start | Main-End |
|---|---|---|---|
| row | Horizontal (left to right) | Left | Right |
| row-reverse | Horizontal (right to left) | Right | Left |
| column | Vertical (top to bottom) | Top | Bottom |
| column-reverse | Vertical (bottom to top) | Bottom | Top |
1.container {2 display: flex;3 flex-direction: row; /* or row-reverse, column, column-reverse */4 justify-content: flex-start; /* Align along main axis */5 align-items: center; /* Align along cross axis */6}7 8/* Example: Center items horizontally */9.centered {10 display: flex;11 justify-content: center;12}Aligning Content with justify-content
The justify-content property controls how flex items are aligned and distributed along the main axis. This property becomes particularly useful when flex items do not fill the entire space available in the container, as it determines how any remaining free space is distributed as documented by MDN.
Justify-Content Values
- flex-start (default): Items packed toward the main-start edge
- flex-end: Items packed toward the main-end edge
- center: Items centered along the main axis
- space-between: Even distribution, first at start, last at end
- space-around: Equal space around each item (half at edges)
- space-evenly: Equal space everywhere including edges
The flex-start value aligns all flex items toward the main-start edge of the container. For a row layout in a left-to-right context, items align to the left; for a column layout, items align to the top. This is the default behavior.
The center value centers flex items along the main axis, distributing any free space equally on both sides. This creates a symmetrical layout with items perfectly centered within the container. Center alignment is one of the most common layout requirements, frequently used for navigation bars, button groups, and card content.
The space-between value distributes flex items evenly along the main axis, with the first item at the main-start edge and the last item at the main-end edge. The space between adjacent items is equal, but there is no space before the first item or after the last item.
The space-around value distributes space evenly around each flex item, including the edges of the container. The space before the first item and after the last item is half the size of the space between adjacent items.
These alignment techniques are fundamental skills for any front-end developer working with modern CSS layouts.
Practical Examples
Navigation Bar
Navigation bars are one of the most common use cases for flexbox. Using justify-content: space-between creates a classic layout with items anchored to opposite edges. The first item appears at the main-start edge, the last at the main-end edge, with equal spacing between items.
Perfect Centering
Perfect centering both horizontally and vertically is achieved by combining justify-content: center (main axis) with align-items: center (cross axis). This elegant solution eliminates the need for transform-based hacks and works reliably across all modern browsers.
.centered-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Card Grid
For responsive card grids, use flex-wrap: wrap combined with justify-content: space-evenly or space-between. Cards distribute evenly while maintaining consistent gaps, creating a balanced appearance that adapts to different screen sizes.
The Cross Axis Relationship
The cross axis always runs perpendicular to the main axis. When the main axis is horizontal (row), the cross axis is vertical. When the main axis is vertical (column), the cross axis is horizontal.
The align-items and align-self properties control alignment along the cross axis, complementing justify-content which handles the main axis. Together, these properties enable two-dimensional alignment within a flex container.
Understanding the axis relationship helps prevent confusion when switching between row and column layouts. When you change flex-direction from row to column, the axes rotate, which means justify-content now affects vertical alignment instead of horizontal, and align-items affects horizontal alignment instead of vertical.
These flexbox techniques are essential tools for building modern, responsive websites that deliver exceptional user experiences across all devices.
Frequently Asked Questions
Sources
-
MDN Web Docs - Basic concepts of flexbox - Comprehensive official documentation explaining the two axes of flexbox, main axis definition via flex-direction, and how justify-content aligns items along the main axis.
-
MDN Web Docs - justify-content property - Complete reference for the justify-content property including all values, syntax, browser support, and practical examples.
-
CSS-Tricks - A Complete Guide to Flexbox - Widely-referenced comprehensive guide with visual diagrams showing flexbox properties, including main axis behavior and justify-content examples.