display: flex transforms an element into a flex container, enabling the Flexbox layout model. This allows its direct children (flex items) to be aligned and distributed along both the main and cross axes with ease.

Key Points

1
display: flex creates a block-level flex container; display: inline-flex creates an inline-level flex container.
2
Direct child elements become flex items, which can grow, shrink, and align automatically within the container.
3
Flexbox provides one-dimensional layout control (row or column) along the main axis.
4
It simplifies spacing, alignment, and responsiveness compared to floats or inline-block layouts.
5
Flex properties like justify-content, align-items, and flex-wrap control the layout of flex items inside the container.

Example: Basic Flex Container

In this example, the .container becomes a flex container, arranging its children .item along the main axis with equal spacing and centering them along the cross axis.

Best Practices

1
Use display: flex for one-dimensional layouts where items need to be aligned in a row or column.
2
Combine with flex-wrap for responsive designs where items may need to wrap onto multiple lines.
3
Understand the main axis vs cross axis to apply proper alignment.
4
Test across different browsers and screen sizes to ensure consistent layout behavior.

Difficulty: 3/10

Topics: flex container, flex items, alignment

Scenario Questions

0-2 years experience

1
How would you center a button and a text label horizontally inside a header using flexbox?
2
What happens if you set display: flex on a div with three child divs but don’t specify any flex properties?
3
If you have two flex items and one has flex: 2 while the other has flex: 1, how will they divide the available space?

2-5 years experience

1
A responsive card grid breaks on mobile — the items overflow the container even though you set flex-wrap: wrap. What could be causing this and how would you debug it?
2
You’re building a navigation bar that should collapse into a vertical stack on small screens, but the items are still wrapping oddly. What flex properties might you be missing or misusing?
3
Why might a flex item with text content appear truncated on some browsers even though it has flex: 1 and no explicit width?

5-8 years experience

1
You’re designing a dynamic dashboard with resizable panels that use flexbox. How would you handle performance when users resize multiple panels simultaneously, and what edge cases might cause layout thrashing?
2
How would you structure a complex form layout with nested flex containers that needs to support RTL, screen readers, and dynamic field additions without breaking accessibility or responsiveness?
3
A legacy component uses flexbox for a list of cards, but it’s causing layout shifts during lazy loading. What’s the root cause and how would you fix it without rewriting the entire component?

8+ years experience

1
You’re leading a migration from CSS Grid to Flexbox for a large-scale UI library used across 50+ products. What tradeoffs do you weigh in terms of maintainability, browser support, and developer ergonomics?
2
How would you design a cross-team CSS architecture standard for flexbox usage that prevents layout bugs when teams integrate components with conflicting flex behaviors?
3
A legacy app uses flexbox for layout but has inconsistent alignment across browsers due to vendor prefixes and outdated polyfills. How do you prioritize and execute a long-term cleanup without breaking existing features?

Follow-up Questions

❓What happens if you set flex: 1 on all children but one has a fixed width?
❓How does flex-wrap change the behavior when content overflows?
❓Why might a flex item not shrink even when the container is too small?