CSS
Flexible Item Sizing with Proportional Flex-Grow/Shrink
Learn how to distribute available space among flex items disproportionately using `flex-grow` and `flex-shrink` properties for dynamic layouts.
.container {
display: flex;
width: 100%;
border: 1px solid #ccc;
height: 100px;
}
.item {
padding: 10px;
border: 1px solid #f00;
background-color: lightblue;
flex-basis: 0; /* Important for flex-grow to work as expected */
}
.item-1 {
flex-grow: 1; /* Takes 1 part of available space */
}
.item-2 {
flex-grow: 2; /* Takes 2 parts of available space */
}
.item-3 {
flex-grow: 1; /* Takes 1 part of available space */
flex-shrink: 2; /* Shrinks twice as fast if space is constrained */
}
How it works: This snippet demonstrates how to control the distribution of space among flex items using `flex-grow` and `flex-shrink`. By setting different `flex-grow` values, items expand proportionally to fill available space. `flex-shrink` dictates how items contract when space is limited. Setting `flex-basis: 0` ensures `flex-grow` distributes remaining space evenly from a zero base, making the growth truly proportional to the available space.