CSS
Uneven Space Distribution for Flex Items with `flex-grow`
Master how to distribute available space unevenly among Flexbox items using the `flex-grow` property, enabling layouts where certain elements expand proportionally more than others.
.container-uneven {
display: flex;
gap: 1rem;
border: 1px solid #ccc;
padding: 1rem;
width: 100%;
min-height: 150px;
}
.item-base {
background-color: #f0f8ff;
border: 1px solid #a9d0e8;
padding: 1rem;
text-align: center;
min-width: 80px;
}
.item-sidebar {
flex-grow: 1;
background-color: #dbe9f4;
}
.item-main {
flex-grow: 3;
background-color: #c9e0ed;
}
.item-ad {
flex-grow: 0.5;
background-color: #eaf3f8;
}
/* HTML Structure for context:
<div class="container-uneven">
<div class="item-base item-sidebar">Sidebar (grow: 1)</div>
<div class="item-base item-main">Main Content (grow: 3)</div>
<div class="item-base item-ad">Ad (grow: 0.5)</div>
</div>
*/
How it works: This snippet demonstrates how to distribute remaining space among flex items unevenly using the `flex-grow` property. By assigning different numerical values to `flex-grow` (e.g., `1`, `3`, `0.5`), the items will expand to fill the available space proportionally to their `flex-grow` values. For instance, an item with `flex-grow: 3` will take three times more of the extra space than an item with `flex-grow: 1`, allowing for flexible, weighted column layouts like sidebars and main content areas.