CSS
Dynamic Flex Item Sizing with flex-grow, flex-shrink, flex-basis
Understand the powerful `flex` shorthand property to control how flex items grow, shrink, and determine their initial size, enabling highly adaptive layouts.
.flex-container {
display: flex;
width: 100%;
min-height: 150px;
border: 2px solid #4CAF50;
margin-bottom: 20px;
gap: 10px; /* New in Flexbox, very useful */
}
.flex-item {
padding: 15px;
background-color: #e0f2f1;
border: 1px solid #009688;
text-align: center;
font-family: sans-serif;
}
/* Item 1: Takes available space with flex-grow, doesn't shrink, initial width 100px */
.item-1 {
flex: 1 0 100px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 100px */
background-color: #b2dfdb;
}
/* Item 2: Grows 2x as much as item 1, can shrink, initial width 150px */
.item-2 {
flex: 2 1 150px; /* flex-grow: 2, flex-shrink: 1, flex-basis: 150px */
background-color: #80cbc4;
}
/* Item 3: Doesn't grow, can shrink, initial width 200px */
.item-3 {
flex: 0 1 200px; /* flex-grow: 0, flex-shrink: 1, flex-basis: 200px */
background-color: #4db6ac;
}
/* Another example: three equal columns, grow equally, can shrink, initial basis 0 */
.equal-columns-container {
display: flex;
width: 100%;
min-height: 100px;
border: 2px solid #FFC107;
gap: 10px;
}
.equal-column {
flex: 1; /* Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
padding: 15px;
background-color: #ffecb3;
border: 1px solid #ffb300;
text-align: center;
font-family: sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Item Sizing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Dynamic Sizing Example</h2>
<div class="flex-container">
<div class="flex-item item-1">Item 1 (flex: 1 0 100px)</div>
<div class="flex-item item-2">Item 2 (flex: 2 1 150px)</div>
<div class="flex-item item-3">Item 3 (flex: 0 1 200px)</div>
</div>
<h2>Equal Columns Example</h2>
<div class="equal-columns-container">
<div class="equal-column">Column A</div>
<div class="equal-column">Column B</div>
<div class="equal-column">Column C</div>
</div>
</body>
</html>
How it works: This snippet illustrates the power of the `flex` shorthand property, which 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` dictates how much an item will shrink relative to others if there isn't enough space. `flex-basis` sets the initial main size of a flex item before any available space is distributed. Understanding these properties is key to creating truly responsive and dynamic layouts that adapt content gracefully to different screen sizes. The second example shows the common `flex: 1` shorthand for equally distributed columns.