HTML & CSS Interview Question #90

What do flex-grow, flex-shrink, and flex-basis mean?

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

Quick Interview Answer

flex-basis defines an item's initial main-size basis before free space is distributed. flex-grow determines how an item can consume positive free space, while flex-shrink determines how it can shrink when the container has insufficient space.

Detailed Explanation

flex-basis defines an item's initial main-size basis before free space is distributed. flex-grow determines how an item can consume positive free space, while flex-shrink determines how it can shrink when the container has insufficient space.

The flex shorthand is usually preferred because the three properties interact. Understanding them helps diagnose why a flex item becomes unexpectedly wide, narrow, or resistant to shrinking.

Code Example

.sidebar {
    flex: 0 0 280px;
}

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