The flex shorthand property in CSS defines how a flex item grows, shrinks, and sets its base size within a flex container. It combines three individual properties — flex-grow, flex-shrink, and flex-basis — into a single, concise declaration.

Syntax

1
flex: <flex-grow> <flex-shrink> <flex-basis>;
2
Each value is optional, and omitted values fall back to defaults.

Components of the flex Shorthand

1
flex-grow: Defines how much a flex item will grow relative to the rest when space is available (default: 0).
2
flex-shrink: Defines how much a flex item will shrink relative to others when space is limited (default: 1).
3
flex-basis: Defines the initial size of the item before space distribution (default: auto).

Example: Using the flex Shorthand

In this example, Item 2 grows twice as fast as Items 1 and 3 because its flex-grow value is 2. All items start with a base width of 150px and shrink equally if necessary.

Common Shorthand Values

1
flex: 1; → Equivalent to flex: 1 1 0; (items grow and shrink equally).
2
flex: auto; → Equivalent to flex: 1 1 auto;.
3
flex: none; → Equivalent to flex: 0 0 auto; (fixed size, no growth or shrink).
4
flex: initial; → Equivalent to flex: 0 1 auto; (default behavior).

Best Practices

1
Use flex: 1 to evenly distribute available space among items.
2
Use flex: none for fixed-size elements like buttons or logos.
3
Combine flex-grow and flex-basis strategically for responsive layouts.
4
Avoid mixing width and flex properties unless necessary for layout control.

Difficulty: 3/10

Topics: flex-grow, flex-shrink, flex-basis

Scenario Questions

0-2 years experience

1
You're building a two-column layout where one column should take up twice as much space as the other — how would you use flex shorthand to achieve that?
2
A button and a text input are side by side, but the button is way too wide. You set flex: 1 on both, but it doesn't fix it. What's likely wrong?
3
If you set flex: 0 1 100px on an element, what does each number mean and how will it behave when the container shrinks?

2-5 years experience

1
A responsive card grid breaks on mobile — items overflow or collapse weirdly. You suspect flex shorthand misuse. How would you diagnose and fix it?
2
Your team’s design system uses flex: 1 everywhere for equal-width columns, but now a new component needs one item to be narrower. What’s the risk of just changing one flex value, and how would you handle it?
3
A modal with three buttons is misaligned on iOS Safari. All buttons have flex: 1, but one is visibly smaller. What could be causing this, and how would you investigate?

5-8 years experience

1
You're designing a dynamic dashboard with collapsible panels that use flex. How do you ensure smooth resizing and avoid layout thrashing when users toggle panels frequently?
2
A legacy component uses flex: auto on everything, and now it's causing performance issues on low-end devices. How would you refactor it without breaking existing layouts?
3
In a complex form with nested flex containers, users report inconsistent input widths across browsers. How do you isolate whether it's a flex shorthand misconfiguration or a browser rendering quirk?

8+ years experience

1
Your company is migrating from a float-based grid to flexbox at scale. How do you prioritize which components to refactor first, and how do you prevent regressions across 50+ product pages?
2
You're designing a cross-team layout system used by 20+ product teams. How do you standardize flex shorthand usage to avoid inconsistent behaviors while still allowing flexibility for edge cases?
3
A critical feature relies on flex-based layouts that break when internationalized text expands. How do you architect a resilient layout system that handles dynamic content growth without requiring constant CSS overrides?

Follow-up Questions

❓What happens if you set flex: 1 on one item but leave another with default flex values?
❓How would you debug a layout where items aren't shrinking as expected?
❓Why might flex: 1 not work the way you expect inside a nested flex container?