Flexbox allows you to easily align specific items within a container. To move the last item to the right side, you can use margin-left: auto on that item.

Key Techniques

1
Set the container's display to flex.
2
Use justify-content for general alignment of items if needed.
3
Apply margin-left: auto to the flex item you want to push to the right.
4
This works because auto margins in Flexbox absorb available space along the main axis.
5
Ensure other items do not have conflicting margins that affect alignment.

Example: Align Last Item Right

In this example, the last .item moves to the far right of the .container while the other items remain on the left. Flexbox's auto margin efficiently pushes it to the end of the main axis.

Difficulty: 3/10

Topics: flexbox alignment, justify-content, margin auto

Scenario Questions

0-2 years experience

1
You're building a navbar with a logo on the left and a button on the right — how would you make sure the button sticks to the far right edge of the container?
2
I see your flex container has three items, but the last one isn't aligning to the right even though you used justify-content: space-between — what’s likely wrong?
3
Your teammate says 'margin-right: auto' pushes the last item right — is that correct? What should they use instead?

2-5 years experience

1
Our header component has dynamic content — sometimes there’s a search bar, sometimes not — how do you ensure the profile avatar always stays right-aligned without breaking layout when content disappears?
2
A user reports that on mobile, the 'Sign In' button jumps to the center instead of staying right-aligned — what’s the most likely cause and how would you debug it?
3
You’re using margin-left: auto on the last item to push it right, but now the spacing between items feels inconsistent across browsers — what alternatives would you consider and why?

5-8 years experience

1
We’re building a responsive toolbar that needs to align the last action button to the right on desktop but stack vertically on mobile — how do you maintain alignment semantics without duplicating markup or using media queries for every state?
2
In our design system, we have 12 components using flex alignment for right-aligned buttons — some use justify-content: flex-end, others use margin-left: auto. How would you standardize this and what tradeoffs do you weigh?
3
A performance audit shows layout thrashing on our dashboard when the last item in a flex container changes dynamically — how would you optimize the alignment strategy to avoid reflows?

8+ years experience

1
We’re migrating a legacy UI from floats to flexbox, and dozens of components rely on hardcoded right-aligned buttons — how do you design a scalable, maintainable alignment utility system that won’t break during phased rollouts?
2
Our design system supports 10+ international markets with RTL languages — how do you architect the flex alignment logic to handle both LTR and RTL without duplicating styles or introducing bugs in edge cases?
3
We have a component library used across 50+ internal products, and right-alignment behavior is inconsistent due to inherited flex properties — how would you enforce alignment semantics at the architecture level without forcing consumers to override every time?

Follow-up Questions

❓What if there are multiple items and you only want the last one to be right-aligned?
❓How does this behave when the container wraps to multiple lines?
❓Why wouldn't you just use text-align: right here?