How does Flexbox handle fixed and flexible widths together?

Difficulty: 6/10

flex-basis, flex-grow, flex-shrink

Handling Fixed and Flexible Widths in Flexbox

Flexbox can manage both fixed-width and flexible-width items within the same container. Fixed-width items maintain their specified size, while flexible items grow or shrink to fill the remaining space.

Key Points

1
Fixed-width items use a specific width value and do not grow or shrink unless flex-shrink is applied.
2
Flexible items use the flex property (e.g., flex: 1) to take up remaining space after accounting for fixed items.
3
Flex items respect flex-grow, , and when distributing remaining space.

Example: Fixed and Flexible Widths

In this example, the first item has a fixed width of 150px, while the other two items share the remaining space equally due to flex: 1.

Scenario Questions

0-2 years experience

Follow-up Questions