CSS
Flexbox: Controlling Item Growth and Shrinkage
Master `flex-grow`, `flex-shrink`, and `flex-basis` to precisely control how flex items resize within their container, ensuring adaptive and predictable layouts.
.container {
display: flex;
width: 100%;
}
.item-fixed {
flex: 0 0 150px; /* Do not grow, do not shrink, initial basis 150px */
background-color: lightcoral;
}
.item-grow-more {
flex: 2 1 0px; /* Grows twice as much as others, can shrink, initial basis 0 */
background-color: lightgreen;
}
.item-grow-less {
flex: 1 1 0px; /* Grows normally, can shrink, initial basis 0 */
background-color: lightblue;
}
How it works: The `flex` shorthand property combines `flex-grow`, `flex-shrink`, and `flex-basis`. `flex-grow` determines how much an item will grow relative to others if there's available space. `flex-shrink` determines how much an item will shrink relative to others if there's not enough space. `flex-basis` sets the initial size of a flex item before any growing or shrinking occurs.