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.

The flex shorthand lets you control item growth, shrinkage, and base size in one line. Understanding flex-grow, flex-shrink, and flex-basis helps create flexible, responsive layouts efficiently.

Difficulty: 3/10

Topics: flex-shorthand, layout alignment, responsive design

Scenario Questions

0-2 years experience

1
You're building a two-column layout where the left column should take up 70% of the width and the right column 30%. You set flex: 7 3 on the left and flex: 3 7 on the right, but both columns are equal width. What’s wrong?
2
A button inside a flex container is overflowing its parent. You set flex: 1 on the button. Why isn’t it shrinking to fit, and how would you fix it?

2-5 years experience

1
A responsive card grid breaks on mobile: items wrap but stretch too wide. You used flex: 1 1 100% on each card. What’s the likely issue, and how would you adjust the flex values to fix it without changing the HTML?
2
Your team’s header component uses flex: 1 on the title and flex: 0 0 auto on the buttons. On tablets, the title gets cut off. How would you diagnose and fix this without hardcoding widths?

5-8 years experience

1
You’re designing a dynamic dashboard with collapsible panels. Each panel uses flex: 1 1 auto. When users collapse panels, the remaining ones don’t redistribute space smoothly. How would you redesign the flex configuration to handle dynamic sizing without layout thrashing?
2
A legacy component uses flex: 1 on all children in a row. When one child has a very long text node, it breaks the layout on small screens. How would you refactor this to be resilient without changing the component’s structure?

8+ years experience

1
Your company’s design system uses flex: 1 across hundreds of components. As the UI scales, performance degrades on low-end devices due to constant flex recalculations. How would you architect a migration strategy to reduce layout thrash while maintaining backward compatibility?
2
You’re leading a cross-team effort to unify layout patterns. One team uses flex: 1 1 0%, another uses flex: 1 1 auto. How do you evaluate which approach is more sustainable long-term for a global component library, and how would you enforce consistency without breaking existing features?

Follow-up Questions

❓What happens if you set flex: 1 1 auto on an element with no explicit width?
❓How would you debug a flex item that’s not shrinking as expected?
❓Why might flex: 1 not work the same as flex: 1 1 0?