A flex container is created by applying display: flex or display: inline-flex to a parent element. This enables the Flexbox layout model, allowing the children (flex items) to be aligned and distributed along the main and cross axes.

Key Points

1
display: flex makes the container a block-level flex container.
2
display: inline-flex makes the container an inline-level flex container.
3
Flex items are the direct children of a flex container.
4
Flex container properties like justify-content, align-items, align-content, and flex-wrap control the alignment, spacing, and wrapping of the items.

Example: Basic Flex Container

In this example, .container is a flex container. The .item elements are flex items, evenly spaced along the main axis and centered along the cross axis using justify-content and align-items.

Best Practices

1
Use display: flex for one-dimensional layouts (row or column).
2
Combine flex-wrap: wrap for responsive multi-line layouts.
3
Understand the main axis vs cross axis for proper alignment.
4
Test across browsers to ensure consistent behavior.

Difficulty: 3/10

Topics: flex-direction, justify-content, align-items

Scenario Questions

0-2 years experience

1
How would you make three buttons sit side by side in a header with equal spacing between them using flexbox?
2
What happens if you set display: flex on a div but don't specify flex-direction — how do the children arrange themselves by default?
3
You have a card with a title and a button, but the button is stuck to the top — how do you center it vertically using flexbox?

2-5 years experience

1
A responsive navigation bar breaks on mobile — the items stack vertically but overflow the container. What could be causing this, and how would you fix it?
2
Your team’s component library has a flex-based card that looks fine in dev but misaligns in production. What would you check first, and why?
3
A form layout with labels and inputs uses flexbox, but on small screens, the inputs get squished. How would you adjust the flex properties to preserve usability?

5-8 years experience

1
You’re designing a dynamic dashboard with collapsible panels — how would you structure the flex container to ensure smooth resizing without layout thrashing or overflow issues?
2
A legacy UI uses floats for a grid, but you’re migrating to flexbox. What edge cases in browser support or content overflow should you anticipate, and how would you handle them?
3
How would you design a flex-based carousel with variable-width items that still maintains visual balance and avoids clipping on low-resolution devices?

8+ years experience

1
You’re leading a cross-team effort to standardize layout systems across 20+ products — why would you choose flexbox over CSS Grid for certain components, and how do you enforce consistency without over-constraining designers?
2
A legacy monorepo has hundreds of flex containers with inconsistent property usage. How would you design a migration strategy to refactor them without breaking UIs in production?
3
How would you architect a themable layout system using flexbox that supports RTL, dynamic font scaling, and accessibility requirements across global markets — and what metrics would you track to validate performance and maintainability?

Follow-up Questions

❓What happens if you forget to set a height on the flex container when using align-items: stretch?
❓How would you debug a flex item that isn't shrinking even though you set flex-shrink: 1?
❓Why might flex-wrap: wrap not behave as expected when the container has a fixed width?