1
Set the container's display to flex.
2
Use flex-wrap: wrap to allow items to move to the next line when space is limited.
3
Use flexible sizing with flex (e.g., flex: 1 1 200px) so items grow and shrink relative to container size.
4
Apply gap to maintain consistent spacing between items without relying on fixed margins.
5
Combine media queries to adjust flex properties or item widths for different screen sizes.

Example: Responsive Flexbox Layout

In this example, each .item will grow or shrink based on available space. When the container width is too small, items wrap to the next line, creating a responsive layout without extra CSS.

Difficulty: 6/10

Topics: flex-direction, flex-wrap, align-items

Scenario Questions

0-2 years experience

1
How would you make three buttons stack vertically on mobile but sit side-by-side on desktop using Flexbox?
2
What happens if you set flex: 1 on two children inside a container with width: 100% — how do they divide space?
3
If a flex item overflows its container on small screens, what’s the first thing you’d check in the CSS?

2-5 years experience

1
A responsive navbar breaks on tablets — the menu items wrap awkwardly and the logo gets squished. How would you debug and fix this?
2
You’re building a product card grid that needs to show 1–4 items per row depending on screen size. Why might flexbox be better than grid here, and what edge case could trip you up?
3
A team member used flex-grow: 1 on all items in a row, but now the layout looks broken on iOS Safari. What could be causing it?

5-8 years experience

1
You’re designing a dynamic dashboard with collapsible panels that use flexbox. How do you ensure performance doesn’t degrade when users resize the window rapidly or toggle panels frequently?
2
How would you structure a responsive form layout with mixed input types (text, select, checkboxes) that stays accessible and aligns properly across 3+ breakpoints without using media queries for every variation?
3
A legacy component uses flexbox for a complex card grid, but it’s causing layout thrashing on low-end devices. What optimizations would you propose without rewriting the entire UI?

8+ years experience

1
You’re leading a migration from a legacy float-based layout system to Flexbox across 20+ product teams. What’s your strategy to ensure consistency, avoid regressions, and handle legacy browser support?
2
How would you design a component library’s responsive layout system using Flexbox that balances developer ergonomics with runtime performance and accessibility compliance across global markets?
3
A major feature relies on nested flex containers for a dynamic UI. How do you evaluate whether this architecture is sustainable long-term, and when would you consider switching to CSS Grid or a hybrid approach?

Follow-up Questions

❓What happens if you set flex-grow on a child but forget to set width on the container?
❓How would you debug a flex item that’s not wrapping even though you set flex-wrap: wrap?
❓Why might flexbox behave differently in Safari compared to Chrome in a complex layout?