Flexbox, or the Flexible Box Layout, is a CSS layout model designed to provide an efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.

Key Concepts

1
Flex container: The parent element with display: flex or display: inline-flex.
2
Flex items: The direct children of a flex container that are laid out according to flexbox rules.
3
Main axis and cross axis: Flex items are arranged along the main axis (default horizontal) and can be aligned along the cross axis (default vertical).
4
Flex properties like justify-content, align-items, align-self, and flex-wrap control the positioning and spacing of flex items.

Example: Basic Flexbox Layout

In this example, the .container is a flex container, and its children .item are flex items. They are evenly spaced along the main axis, and each item expands equally because of flex: 1.

Best Practices

1
Use Flexbox for one-dimensional layouts (either row or column).
2
Combine with flex-wrap for responsive layouts where items may need to wrap onto multiple lines.
3
Understand the difference between justify-content (main axis) and align-items (cross axis) for proper alignment.
4
Test layouts across different screen sizes to ensure items behave as expected.

Difficulty: 4/10

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

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 width: 100% on a flex item inside a container with flex-direction: row?

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’s likely wrong and how would you fix it?
2
Your team’s modal component looks fine in Chrome but misaligns in Safari. What Flexbox quirks might be causing this and how would you investigate?

5-8 years experience

1
You’re designing a dynamic dashboard with collapsible panels that must maintain vertical alignment when resized. How would you structure the Flexbox layout to avoid layout thrashing and ensure smooth transitions?
2
A legacy component uses absolute positioning for alignment. You want to migrate it to Flexbox without breaking existing layouts. What edge cases would you test and how would you prioritize the refactor?

8+ years experience

1
Your company has 20+ UI components using Flexbox inconsistently — some rely on flex-grow, others use margins for spacing. How would you design a design system standard for Flexbox usage across teams?
2
You’re migrating a legacy app from float-based layouts to Flexbox. What long-term maintenance risks do you anticipate, and how would you structure the migration to minimize regressions and enable team autonomy?

Follow-up Questions

❓What happens if you set flex-grow: 1 on one child but not the others?
❓How would you debug a flex item that’s not aligning as expected?
❓Why might justify-content: center not work as intended in a nested flex container?