HTML & CSS Interview Question #91

What does the flex shorthand property do?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

The flex shorthand sets flex-grow, flex-shrink, and flex-basis together. Common patterns include flex: 1 for flexible items that share available space and flex: 0 0 auto for an item that should not grow or shrink from its automatic basis.

Detailed Explanation

The flex shorthand sets flex-grow, flex-shrink, and flex-basis together. Common patterns include flex: 1 for flexible items that share available space and flex: 0 0 auto for an item that should not grow or shrink from its automatic basis.

Using the shorthand is recommended because its values are designed to work together. Developers should still understand the expanded properties when diagnosing layout behavior.

Code Example

.layout {
    display: flex;
}

.main {
    flex: 1 1 0;
    min-width: 0;
}

.actions {
    flex: 0 0 auto;
}