In Flexbox, layout is based on two axes: the main axis and the cross axis. Understanding these axes is essential for aligning and distributing flex items correctly.

Key Points

1
The main axis is the primary axis along which flex items are laid out. By default, it runs horizontally (row direction).
2
The cross axis is perpendicular to the main axis. By default, it runs vertically.
3
Properties like justify-content control alignment along the main axis.
4
Properties like align-items and align-self control alignment along the cross axis.
5
The direction of the main axis can be changed using flex-direction (row, row-reverse, column, column-reverse). The cross axis adjusts automatically.

Example: Main and Cross Axis Alignment

In this example, the .container flex items are distributed along the main axis (horizontal) using justify-content and centered along the cross axis (vertical) using align-items.

Best Practices

1
Always identify the main and cross axes before applying alignment properties.
2
Use flex-direction to change the layout direction and understand how it affects axes.
3
Combine justify-content and align-items for precise positioning.
4
Test layouts on different screen sizes to ensure alignment behaves as expected.

Difficulty: 3/10

Topics: flex-direction, align-items, justify-content

Scenario Questions

0-2 years experience

1
You're building a horizontal navigation bar with five items, and they're not centering vertically — what’s the most likely cause, and how would you fix it?
2
If you set flex-direction: column on a container, and then use justify-content: center, where will the children be aligned?
3
A button group is stacking vertically instead of horizontally even though you set display: flex — what axis are you probably misunderstanding?

2-5 years experience

1
A responsive card layout breaks on mobile: the text overflows because items aren’t wrapping properly — how would you debug whether the issue is with main or cross axis alignment?
2
Your team’s design system uses flexbox for form labels and inputs, but on some screens the inputs are misaligned — what axis-related property might be inconsistently set across components?
3
A modal footer has two buttons that should be spaced evenly, but they’re sticking to the left — you’ve set justify-content: space-between, but it’s not working. What’s the most likely root cause?

5-8 years experience

1
You’re designing a dynamic dashboard with collapsible panels that switch between row and column layouts based on screen size — how do you ensure consistent alignment behavior across both orientations without duplicating styles?
2
A legacy component uses flexbox for a complex grid of cards, but it’s breaking under dynamic content loads — how would you audit whether axis confusion is causing layout instability or if it’s a sizing issue?
3
Your component library has inconsistent vertical alignment across different flex containers — how would you enforce axis consistency at a system level without forcing developers to remember every flex property?

8+ years experience

1
You’re migrating a large codebase from CSS Grid to Flexbox for better browser support — how do you ensure axis semantics are preserved across hundreds of components without introducing visual regressions?
2
Your cross-team design system uses flexbox for layout primitives, but different teams interpret main/cross axes differently — how would you architect a solution to enforce axis consistency at the framework level?
3
A legacy app uses flexbox with hardcoded flex-direction values, but now needs to support RTL layouts — how would you redesign the layout primitives to make axis behavior locale-aware without breaking existing features?

Follow-up Questions

❓What happens if you change flex-direction from row to column?
❓Why does align-items not work the way you expected when flex-direction is column?
❓How would you center a child both horizontally and vertically if the container’s direction is row?