The justify-content property in Flexbox is used to align flex items along the main axis of a flex container. It controls how the available space is distributed between and around the items.

Key Points

1
justify-content aligns items along the main axis, which is horizontal by default (row) and vertical if flex-direction is column.
2
Common values include:
- flex-start: items are packed toward the start of the main axis.
- flex-end: items are packed toward the end.
- center: items are centered along the main axis.
- space-between: items are evenly distributed, with the first item at the start and last at the end.
- space-around: items are evenly distributed with equal space around them.
- space-evenly: items are evenly distributed with equal space between and around them.
3
justify-content does not affect the cross axis; use align-items or align-self for that.
4
It is useful for controlling spacing in both horizontal and vertical layouts depending on the flex direction.

Example: Using justify-content

In this example, the .container flex items are arranged along the main axis (row). justify-content: space-between distributes the items evenly, placing the first item at the start, the last at the end, and spacing the middle item equally between them.

Best Practices

1
Choose justify-content values based on the desired spacing along the main axis.
2
Combine with flex-direction to achieve horizontal or vertical alignment.
3
Use align-items or align-self for cross-axis alignment.
4
Test layouts with different screen sizes to ensure spacing remains visually balanced.

Difficulty: 3/10

Topics: flexbox layout, horizontal alignment, space distribution

Scenario Questions

0-2 years experience

1
You're building a navbar with three buttons, and they're all stuck to the left — how would you use justify-content to center them?
2
If you set justify-content: space-between on a flex container with only two items, what visual spacing do you expect?
3
What happens if you apply justify-content: flex-end to a flex container that has no width set?

2-5 years experience

1
A responsive card grid uses justify-content: space-around, but on mobile, the items overflow the container — what’s likely causing this, and how would you fix it?
2
Your team’s button group component looks fine in development, but breaks when dynamic content adds a fourth button — why might justify-content: space-evenly be problematic here?
3
A designer says the spacing between icons in a toolbar feels uneven — you’re using justify-content: center. What could be the real issue, and how would you debug it?

5-8 years experience

1
You're designing a reusable header component that must support both left-aligned and centered layouts depending on context — how would you architect the CSS to avoid duplication while preserving accessibility and performance?
2
In a high-traffic dashboard, users report layout jank when filters dynamically update — how might justify-content interact with layout thrashing, and what optimizations would you implement?
3
Your component library’s flex-based grid breaks in RTL locales — what edge cases with justify-content should you test, and how would you ensure correct behavior without hardcoding direction?

8+ years experience

1
Your company is migrating from a legacy grid system to CSS Flexbox — how would you prioritize which components to refactor first, and what risks does justify-content behavior pose in mixed legacy/new environments?
2
You’re designing a cross-team UI system used across 20+ products — how do you standardize justify-content usage to prevent visual inconsistency while allowing enough flexibility for product-specific needs?
3
A legacy component uses justify-content: space-between with hardcoded widths — you need to make it responsive without breaking existing integrations. What’s your migration strategy, and how do you measure success?

Follow-up Questions

❓What happens if you change the flex-direction to column?
❓How would you center items both horizontally and vertically?
❓Why might space-around behave differently than space-evenly on narrow screens?