While both Flexbox and CSS Grid are CSS layout models, Flexbox focuses on one-dimensional layouts along a single axis, either row or column, making it ideal for distributing space and aligning items in a flexible manner.

Key Flexbox Features

1
One-dimensional layout: Flexbox handles layouts along a single axis (row or column) at a time.
2
Flexible sizing: Items can grow or shrink to fill available space using flex-grow, flex-shrink, and flex-basis.
3
Alignment control: Flexbox provides easy control over alignment along main and cross axes using justify-content, align-items, and align-self.
4
Nesting: Flex containers can be nested to create more complex layouts while maintaining flexibility.
5
Gap support: Flexbox supports the gap property to maintain consistent spacing between items without margins.

Example: Flexbox Layout

In this example, all items share available space equally due to flex: 1, demonstrating Flexbox's one-dimensional and flexible layout behavior.

Difficulty: 6/10

Topics: Flexbox layout, CSS Grid layout, Responsive design

Scenario Questions

0-2 years experience

1
You're building a card component with a title, image, and button — all stacked vertically. How would you use Flexbox to center them and make the button stretch to fill the width?
2
If you set display: flex on a container but the items aren't wrapping even though they overflow, what’s the most likely missing property?
3
You have three buttons in a row and want them to take equal space, even if one has longer text. How do you make that happen with Flexbox?

2-5 years experience

1
A responsive dashboard has a sidebar and main content area that switch from horizontal to vertical on mobile — but on tablet, the sidebar overlaps the content. What’s likely wrong with the layout, and how would you fix it?
2
Your team used Grid for a form layout, but now the labels and inputs are misaligned on small screens. Why might Grid be causing this, and when would Flexbox be a better choice here?
3
A component works fine in Chrome but breaks in Safari — the flex items are collapsing unexpectedly. What browser quirks might be at play, and how would you debug this?

5-8 years experience

1
You’re designing a dynamic content grid that sometimes has 2 columns, sometimes 4, depending on screen size and data density. Would you use Grid, Flexbox, or a hybrid? What are the performance and maintainability tradeoffs?
2
A legacy component uses Flexbox for a complex 3-level nested layout. It’s slow on mobile and hard to maintain. How would you refactor it using Grid without breaking existing styles?
3
Your design system has a ‘card’ component that’s used everywhere — sometimes as a row, sometimes as a grid. How do you architect the CSS to support both without duplicating code or creating specificity wars?

8+ years experience

1
You’re leading a migration from a legacy table-based layout to modern CSS. Some teams are using Flexbox for everything; others are adopting Grid. How do you establish a consistent layout strategy across 10+ product teams without stifling autonomy?
2
A global UI component library uses Flexbox for all layouts to simplify onboarding. Now, performance is degrading on low-end devices due to excessive reflows. How would you redesign the layout system to scale across 50+ products with varying constraints?
3
You’re designing a new design token system for layouts. How do you define abstractions that let engineers choose between Flexbox and Grid declaratively, while ensuring accessibility, RTL support, and future-proofing for emerging layout standards?

Follow-up Questions

❓When would you choose Flexbox over Grid for a navigation bar?
❓How do you handle a layout that needs both vertical and horizontal alignment?
❓Have you ever had a Flexbox item overflow unexpectedly? How did you debug it?