Syllabus

On this page

Main Axis vs Cross Axis and the DevTools Flex Inspector

Badar KhalilUpdated October 1, 2026 7 min read

Flexbox Main Axis vs Cross Axis

The flexbox main axis and cross axis are the most important concept for understanding why justify-content and align-items sometimes seem to "swap". They do not swap. The axes themselves rotate when you change flex-direction, and the properties follow the axes. Once you see this, Flexbox stops feeling random.

What You Will Learn

What the main axis and cross axis are
How flex-direction decides which axis is which
Which properties work on the main axis and which on the cross axis
Why justify-content may seem to do nothing in a column layout
How writing mode and right-to-left text affect axes
How to debug flex layouts with the DevTools flex inspector (Chrome, Edge and Firefox)

The Two Axes

Main axis: the direction in which flex items are laid out. Set by flex-direction.
Cross axis: always perpendicular to the main axis.

Code

flex-direction: row (default)

   main axis  ------------------------->
  +-----------------------------------+   |
  |  [ 1 ]  [ 2 ]  [ 3 ]              |   | cross axis
  +-----------------------------------+   v


flex-direction: column

  +-----------+    main axis
  |   [ 1 ]   |        |
  |   [ 2 ]   |        |
  |   [ 3 ]   |        v
  +-----------+
   ---------> cross axis

How flex-direction Sets the Axes

`flex-direction`	Main axis	Cross axis	Items start from
`row`	Horizontal	Vertical	Left (in LTR)
`row-reverse`	Horizontal	Vertical	Right (in LTR)
`column`	Vertical	Horizontal	Top
`column-reverse`	Vertical	Horizontal	Bottom

Which Property Works on Which Axis?

Property	Axis	Applies to
`justify-content`	Main axis	Container
`align-items`	Cross axis	Container
`align-self`	Cross axis	Single item
`align-content`	Cross axis (multi-line only)	Container with wrapping
`flex-grow`, `flex-shrink`, `flex-basis`	Main axis	Items
`gap`	Both	Container

The golden rule: justify-content is always about the main axis, align-items is always about the cross axis. Only the physical direction changes.

Goal	Row container	Column container
Center horizontally	`justify-content: center`	`align-items: center`
Center vertically	`align-items: center`	`justify-content: center`

Why justify-content Seems Broken in a Column

This is the number one Flexbox question. In a column container, the main axis is vertical, so justify-content distributes space vertically. But a container with height: auto is exactly as tall as its content, so there is no free space to distribute. Nothing visibly happens. Give the container a height (or min-height) and it works.

CSS

.column {
  display: flex;
  flex-direction: column;
  min-height: 300px;        /* creates free space on the main axis */
  justify-content: center;  /* now it can center vertically */
}

Writing Mode and Right-to-Left Layouts

Flexbox uses logical directions, not physical ones. In a right-to-left language such as Urdu or Arabic, flex-direction: row starts from the right, so flex-start means the right side. In vertical writing modes the row direction turns vertical. This is why Flexbox uses flex-start and flex-end instead of left and right, and why it is a strong choice for multilingual and internationalised interfaces.

CSS

html[dir='rtl'] .toolbar {
  display: flex;           /* row starts from the right automatically */
  justify-content: flex-start;
}

Aligning on the Cross Axis

`align-items`	Result in a row container
`stretch` (default)	Items stretch to fill the container height (if they have no fixed height)
`flex-start`	Items align to the top
`center`	Items centered vertically
`flex-end`	Items align to the bottom
`baseline`	Text baselines line up, great for mixed font sizes

`align-items` vs `align-content`

align-items aligns items within each flex line. align-content distributes the lines themselves and only has a visible effect when flex-wrap: wrap creates more than one line and the container has extra cross-axis space.

The margin: auto Trick on the Main Axis

Auto margins absorb free space before justify-content is applied. That makes margin-left: auto (or margin-inline-start: auto) the cleanest way to push one item to the far end, as in a navbar where the logo stays left and the buttons go right.

Debugging with the DevTools Flex Inspector

You do not have to guess which axis is which. Modern browser DevTools show flex layouts visually. The steps below use Chrome DevTools, and Microsoft Edge works the same way because it is also Chromium-based.

Chrome / Edge DevTools

Open DevTools: right-click the element and choose Inspect, or press F12.
Find the flex badge: in the Elements panel, any element with display: flex or inline-flex shows a small flex badge next to its tag.
Toggle the overlay: click the badge. The page highlights the container, each flex item, and the free space and gaps between them, so you can see exactly where space is left over.
Use the Layout pane: open the Layout tab (next to Styles; it may be under the double-arrow menu). The Flexbox section lists every flex container on the page with a checkbox to show or hide each overlay, plus colour options.
Try the flexbox editor: in the Styles pane, click the small flex icon next to display: flex. A popup lets you click through flex-direction, justify-content, align-items and related values, and see the result instantly on the page.
Edit live: change values in the Styles pane or tick and untick declarations to see which one causes the problem.

Firefox DevTools

Open the Inspector and look for the flex badge on a flex container in the markup view.
Click the badge to highlight the container and its items on the page.
Open the Layout panel and use the Flexbox section. Select a flex item to see how its final size was calculated from its base size, flex-grow, flex-shrink and min/max constraints. This is very useful for understanding why an item is smaller or larger than expected.

A Quick Debugging Checklist

Is display: flex on the correct parent? (Look for the badge.)
What is the current flex-direction? That tells you which axis is main.
Is there free space on that axis? (Look at the overlay.)
Is flex-wrap set? Does align-content have lines to work with?
Is an item being held open by min-width: auto?

Common Mistakes

Assuming justify-content is always horizontal. It follows the main axis.
Using align-content on a single-line container. It has no effect unless there are multiple lines.
Forgetting the height in column layouts. No free space means no visible alignment.
Using row-reverse to fix visual order and ignoring accessibility. Keyboard and screen reader order stays the same as the HTML.
Debugging by guessing. Use the flex badge and overlay first.

Key Takeaways

The main axis follows flex-direction; the cross axis is perpendicular.
justify-content = main axis, align-items = cross axis, always.
Column layouts need available height for justify-content to show an effect.
Use auto margins to push one item to the end of the main axis.
The DevTools flex badge, overlay, Layout pane and flexbox editor turn Flexbox debugging from guesswork into a quick visual check.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 160px; background: #ecf0f1; border: 2px dashed #7f8c8d; }
  .item { background: #3498db; color: #fff; padding: 14px 20px; border-radius: 6px; }
</style>
<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
</div>
<p>Row: main axis is horizontal. Change flex-direction to <b>column</b> and watch justify-content and align-items swap directions.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 220px; background: #ecf0f1; border: 2px dashed #7f8c8d; padding-left: 10px; }
  .item { background: #e74c3c; color: #fff; padding: 10px 18px; margin: 4px 0; border-radius: 6px; }
</style>
<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
</div>
<p>Column: justify-content (center) works vertically, align-items (flex-start) works horizontally. Remove the height and justify-content seems to stop working.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; color: #fff; }
  .box { display: flex; gap: 8px; background: #ecf0f1; padding: 8px; margin-bottom: 10px; }
  .box div { background: #8e44ad; padding: 10px 16px; border-radius: 6px; }
  .reverse { flex-direction: row-reverse; }
  .colrev { flex-direction: column-reverse; width: 120px; }
</style>
<div class='box'><div>1</div><div>2</div><div>3</div></div>
<div class='box reverse'><div>1</div><div>2</div><div>3</div></div>
<div class='box colrev'><div>1</div><div>2</div><div>3</div></div>
<p style='color:#333'>row, row-reverse and column-reverse. Source order never changes, only visual order.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; color: #fff; }
  .container { display: flex; height: 140px; gap: 10px; background: #ecf0f1; padding: 10px; }
  .item { background: #16a085; padding: 10px 16px; border-radius: 6px; }
  .s { align-self: flex-start; }
  .c { align-self: center; }
  .e { align-self: flex-end; }
  .st { align-self: stretch; }
</style>
<div class='container'>
  <div class='item s'>start</div>
  <div class='item c'>center</div>
  <div class='item e'>end</div>
  <div class='item st'>stretch</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .container { display: flex; flex-wrap: wrap; align-content: space-between; gap: 8px; height: 240px; width: 260px; background: #ecf0f1; border: 2px dashed #7f8c8d; padding: 8px; }
  .item { width: 110px; height: 40px; background: #f39c12; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
</style>
<div class='container'>
  <div class='item'>1</div><div class='item'>2</div>
  <div class='item'>3</div><div class='item'>4</div>
</div>
<p>align-content spaces out the <b>lines</b>. Try center, flex-start, flex-end, stretch.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: sans-serif; }
  .nav { display: flex; align-items: center; gap: 14px; background: #2c3e50; color: #fff; padding: 12px 18px; }
  .nav a { color: #ecf0f1; text-decoration: none; }
  .push { margin-left: auto; background: #e74c3c; padding: 8px 14px; border-radius: 6px; }
</style>
<nav class='nav'>
  <strong>Logo</strong>
  <a href='#'>Home</a>
  <a href='#'>Courses</a>
  <a class='push' href='#'>Login</a>
</nav>
<p style='padding:0 18px'>margin-left: auto absorbs all free space on the main axis.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  /* Open DevTools, inspect .toolbar and click the flex badge to see the overlay */
  body { font-family: sans-serif; }
  .toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; background: #ecf0f1; border: 2px solid #bdc3c7; }
  .toolbar button { padding: 10px 16px; border: 0; border-radius: 6px; background: #3498db; color: #fff; cursor: pointer; }
  .toolbar .grow { flex: 1; background: #fff; padding: 10px; border: 1px solid #bdc3c7; border-radius: 6px; }
</style>
<div class='toolbar'>
  <button>Back</button>
  <div class='grow'>Flexible area (flex: 1)</div>
  <button>Save</button>
</div>
<p>Right-click the toolbar, choose Inspect, click the flex badge, then try the flexbox editor icon next to <code>display: flex</code>.</p>

Output

Press Run to execute.

Exercise: Center a Column LayoutHTML

The three buttons should be stacked vertically in the middle of the 300px tall panel, and horizontally centered. Only edit the CSS for .panel. Remember: in a column layout, justify-content works vertically and align-items works horizontally.

Try it Yourself HTML

<style>
  .panel { height: 300px; background: #ecf0f1; display: flex; }
  .panel button { padding: 10px 18px; margin: 4px 0; }
</style>
<div class='panel'>
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

Output

Press Run to execute.

Show expected output

Three buttons stacked vertically, centered horizontally and vertically inside the panel.

This is a self-check — compare your result with the expected output above.

Exercise: Logo Left, Actions Right with Auto MarginHTML

Make .header a flex container with vertically centered items. Keep the logo on the left and push the Login and Register buttons to the far right using margin-left: auto on a single element (do not use justify-content: space-between).

Try it Yourself HTML

<style>
  .header { background: #2c3e50; color: #fff; padding: 14px 20px; font-family: sans-serif; }
  .header button { padding: 8px 14px; margin-left: 8px; }
</style>
<div class='header'>
  <span class='logo'>Logo</span>
  <button>Login</button>
  <button>Register</button>
</div>

Output

Press Run to execute.

Show expected output

Logo on the far left, both buttons grouped on the far right, everything vertically centered.

This is a self-check — compare your result with the expected output above.

Was this page helpful?

Flexbox Main Axis vs Cross Axis

What You Will Learn

The Two Axes

How flex-direction Sets the Axes

Which Property Works on Which Axis?

Why justify-content Seems Broken in a Column

Writing Mode and Right-to-Left Layouts

Aligning on the Cross Axis

align-items vs align-content

The margin: auto Trick on the Main Axis

Debugging with the DevTools Flex Inspector

Chrome / Edge DevTools

Firefox DevTools

A Quick Debugging Checklist

Common Mistakes

Key Takeaways

`align-items` vs `align-content`