Flexbox is ideal for one-dimensional layouts, either in a row or a column, and is particularly useful when you need to distribute space, align items, or handle dynamic content within a container.

Use Cases for Flexbox

1
Aligning items in a single row or column (e.g., navigation bars, toolbars).
2
Distributing space between items evenly using justify-content and gap.
3
Creating flexible components that grow or shrink based on available space using flex properties.
4
Building responsive layouts where items need to wrap onto new lines with flex-wrap.
5
Nesting flex containers for multi-level, flexible layouts.

Example: Responsive Flexbox Layout

In this example, each item is flexible and will grow or shrink to fit the container. Flexbox ensures items wrap and maintain spacing, making it ideal for responsive, one-dimensional layouts.

Difficulty: 6/10

Topics: Flexbox layout flow, Grid layout control, Responsive component design

Scenario Questions

0-2 years experience

1
You're building a horizontal navigation bar with five items that should evenly space out and shrink if the screen gets narrow — would you use Flexbox or Grid, and why?
2
If you set display: grid on a container with three divs inside but don't define any grid-template-columns, what happens to the layout compared to using Flexbox?
3
You have a card component with a title, image, and button stacked vertically — which layout method would you pick, and what happens if you accidentally set flex-direction: row instead of column?

2-5 years experience

1
A product page has a grid of product cards that looks perfect on desktop, but on tablet, the last row has only one card and it looks awkward — how would you fix this without breaking the desktop layout?
2
Your team’s design system uses Flexbox for all layouts, but a new feature requires a complex form with aligned labels and inputs across multiple rows and columns — why is this becoming messy, and what would you suggest changing?
3
A modal popup with a header, scrollable content, and footer is breaking on iOS Safari — the footer keeps floating up. How do you diagnose whether this is a Flexbox or browser-specific issue?

5-8 years experience

1
You're designing a responsive dashboard with draggable widgets that can be rearranged into rows or columns — how do you decide whether to use Flexbox, Grid, or a hybrid approach for performance and maintainability?
2
In a large-scale UI library, some components use Flexbox for alignment and others use Grid for structure — developers are getting confused about when to use which. How would you standardize this across the team?
3
A legacy component uses Flexbox for a two-dimensional layout and is now causing layout thrashing on low-end devices. How would you refactor it to improve performance while preserving the visual design?

8+ years experience

1
Your company is migrating from a legacy CSS framework that relied heavily on floats to a modern system — how do you architect a layout strategy that avoids mixing Flexbox and Grid in ways that create long-term maintenance debt?
2
You're designing a cross-product design system used by 20+ teams. How do you define the rules for when to use Flexbox vs. Grid so that teams don't create inconsistent, hard-to-maintain layouts across products?
3
A legacy product has hundreds of components using Flexbox for everything, even two-dimensional layouts. You need to improve rendering performance and accessibility. How do you prioritize and phase a migration to Grid without breaking existing features?

Follow-up Questions

❓What happens if you try to use Flexbox for a true grid of cards with varying heights and alignment needs?
❓How would you debug a layout that looks fine on desktop but breaks on mobile when using Flexbox?
❓When would you mix Flexbox and Grid in the same component tree?