What is the difference between flex: 1 and flex: auto?

Q: What is the difference between flex: 1 and flex: auto?

Both `flex: 1` and `flex: auto` are commonly used shorthand values for the `flex` property, but they behave slightly differently due to their underlying `flex-grow`, `flex-shrink`, and `flex-basis` values. `flex: 1` → Equivalent to `flex: 1 1 0;`. The item will grow to fill available space, can shrink if necessary, and starts with a base size of 0. `flex: auto` → Equivalent to `flex: 1 1 auto;`. The item will grow and shrink like `flex: 1`, but its base size is determined by its content (`auto`) instead of 0. In short, `flex: 1` treats the item as starting from zero width/height and distributes space, whereas `flex: auto` respects the item's intrinsic size before distributing remaining space. .container { display: flex; width: 600px; border: 1px solid #ccc; } .item { background: #3498db; color: white; margin: 10px; padding: 20px; text-align: center; } .item:nth-child(1) { flex: 1; } .item:nth-child(2) { flex: auto; } .item:nth-child(3) { flex: 1; } Item 1 Item 2 Item 3

Difficulty: 6/10

flex-grow, flex-basis, flex-shrink

Difference Between flex: 1 and flex: auto

Both flex: 1 and flex: auto are commonly used shorthand values for the flex property, but they behave slightly differently due to their underlying flex-grow, flex-shrink, and flex-basis values.

Comparison

1
flex: 1 → Equivalent to flex: 1 1 0;. The item will grow to fill available space, can shrink if necessary, and starts with a base size of 0.
2
flex: auto → Equivalent to flex: 1 1 auto;. The item will grow and shrink like flex: 1, but its base size is determined by its content (auto) instead of 0.

In short, flex: 1 treats the item as starting from zero width/height and distributes space, whereas flex: auto respects the item's intrinsic size before distributing remaining space.

Example: flex: 1 vs flex: auto

Scenario Questions

0-2 years experience

2-5 years experience

Follow-up Questions