Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
While basic flexbox is straightforward, mastering the flex algorithm requires understanding how flex-grow, flex-shrink, and flex-basis work together to distribute space.
How much extra space an item should take
How much an item should shrink when space is tight
The initial size before growing/shrinking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex-basis Deep Dive</title>
</head>
<body>
<div class="container">
<h1>🎯 Flex-Basis Mastery</h1>
<div class="demo-section demo1">
<h3>flex-basis: auto (default)</h3>
<div class="flex-container">
<div class="flex-item item">Short</div>
<div class="flex-item item">Medium Text</div>
<div class="flex-item item">Much Longer Content Here</div>
</div>
<div class="code">flex-basis: auto; /* Uses content width */</div>
</div>
<div class="demo-section demo2">
<h3>flex-basis: 0</h3>
<div class="flex-container">
<div class="flex-item item">Short</div>
<div class="flex-item item">Medium Text</div>
<div class="flex-item item">Much Longer Content Here</div>
</div>
<div class="code">flex-basis: 0; /* Ignores content, equal distribution */</div>
</div>
<div class="demo-section demo3">
<h3>flex-basis: 200px</h3>
<div class="flex-container">
<div class="flex-item item">Item 1</div>
<div class="flex-item item">Item 2</div>
<div class="flex-item item">Item 3</div>
</div>
<div class="code">flex-basis: 200px; /* Fixed initial size */</div>
</div>
<div class="demo-section demo4">
<h3>flex-basis: 33.333%</h3>
<div class="flex-container">
<div class="flex-item item">1/3</div>
<div class="flex-item item">1/3</div>
<div class="flex-item item">1/3</div>
</div>
<div class="code">flex-basis: 33.333%; /* Percentage-based */</div>
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Grow & Shrink</title>
</head>
<body>
<div class="container">
<h1>📈 Flex Grow & Shrink</h1>
<div class="demo-section grow-demo">
<h3>Flex-Grow Distribution</h3>
<div class="flex-container">
<div class="flex-item item-1">Grow: 1</div>
<div class="flex-item item-2">Grow: 2 (Double!)</div>
<div class="flex-item item-3">Grow: 1</div>
</div>
<div class="code">
.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; } /* Takes 2x extra space */
.item-3 { flex-grow: 1; }
</div>
</div>
<div class="demo-section shrink-demo">
<h3>Flex-Shrink Behavior (Resize window!)</h3>
<div class="flex-container">
<div class="flex-item item-1">Shrink: 1</div>
<div class="flex-item item-2">Shrink: 2</div>
<div class="flex-item item-3">Shrink: 0 (No shrink!)</div>
</div>
<div class="code">
.item-1 { flex-shrink: 1; flex-basis: 300px; }
.item-2 { flex-shrink: 2; flex-basis: 300px; } /* Shrinks 2x faster */
.item-3 { flex-shrink: 0; flex-basis: 300px; } /* Never shrinks */
</div>
</div>
</div>
</body>
</html>Loading preview...
Flex-grow: Extra space is divided by the sum of all flex-grow values. An item with flex-grow: 2 gets 2x the space of an item with flex-grow: 1.
Flex-shrink: When space is tight, items shrink proportionally. flex-shrink: 0 means the item never shrinks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Shorthand Mastery</title>
</head>
<body>
<div class="container">
<h1>⚡ Flex Shorthand Reference</h1>
<div class="demo-grid">
<div class="demo-card demo1">
<h3>flex: 1</h3>
<div class="flex-container">
<div class="flex-item item">Equal</div>
<div class="flex-item item">Equal</div>
<div class="flex-item item">Equal</div>
</div>
<div class="code">
flex: 1;
/* = flex: 1 1 0% */
/* Equal distribution */
</div>
</div>
<div class="demo-card demo2">
<h3>flex: auto</h3>
<div class="flex-container">
<div class="flex-item item">Short</div>
<div class="flex-item item">Medium Text</div>
<div class="flex-item item">Very Long Content</div>
</div>
<div class="code">
flex: auto;
/* = flex: 1 1 auto */
/* Based on content */
</div>
</div>
<div class="demo-card demo3">
<h3>flex: none</h3>
<div class="flex-container">
<div class="flex-item item">Fixed</div>
<div class="flex-item item">Fixed</div>
<div class="flex-item item">Fixed</div>
</div>
<div class="code">
flex: none;
/* = flex: 0 0 auto */
/* No grow/shrink */
</div>
</div>
<div class="demo-card demo4">
<h3>flex: [grow] [shrink] [basis]</h3>
<div class="flex-container">
<div class="flex-item item-1">1x</div>
<div class="flex-item item-2">2x</div>
<div class="flex-item item-3">1x</div>
</div>
<div class="code">
.item-1 { flex: 1 1 200px; }
.item-2 { flex: 2 1 200px; }
.item-3 { flex: 1 1 200px; }
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
flex: 1;Equal distribution (flex: 1 1 0%)
flex: auto;Based on content (flex: 1 1 auto)
flex: none;No grow/shrink (flex: 0 0 auto)
flex: 1 0 200px;Custom: grow 1, no shrink, 200px basis