Web · Flexbox Intro
Grow, Shrink, and Basis
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Understanding Flexbox Item Properties
Once you've set up a flex container, you can control how individual flex items behave using three key properties:
flex-grow
,
flex-shrink
, and
flex-basis
.
These properties determine how flex items grow, shrink, and what their initial size should be.
Exercise 2 — The flex-grow Property
The
flex-grow
property determines how much a flex item should grow relative to other items when there is extra space in the container.
Key points about
flex-grow
:
- It accepts a unitless value that serves as a proportion
- The default value is 0 (doesn't grow)
- Higher values mean the item grows more
- If all items have the same flex-grow value (except 0), they will have the same size
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
height: 100px;
border: 2px solid #333;
margin-bottom: 20px;
}
.item {
padding: 10px;
text-align: center;
color: white;
}
/* Default - no growth */
.no-grow .item {
background-color: #2196F3;
width: 100px;
}
/* Equal growth */
.equal-grow .item {
background-color: #4CAF50;
flex-grow: 1;
width: 100px;
}
/* Different growth rates */
.diff-grow .item1 {
background-color: #FF5722;
flex-grow: 1;
width: 100px;
}
.diff-grow .item2 {
background-color: #9C27B0;
flex-grow: 2;
width: 100px;
}
.diff-grow .item3 {
background-color: #FFC107;
flex-grow: 3;
width: 100px;
}
</style>
</head>
<body>
<h3>No flex-grow (default: 0)</h3>
<div class="container no-grow">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>Equal flex-grow: 1</h3>
<div class="container equal-grow">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>Different flex-grow values: 1, 2, 3</h3>
<div class="container diff-grow">
<div class="item1">grow: 1</div>
<div class="item2">grow: 2</div>
<div class="item3">grow: 3</div>
</div>
</body>
</html>
In the example above:
1. The first container shows items without flex-grow, so they maintain their original width
2. The second container shows items with equal flex-grow (1), so they share the space equally
3. The third container shows items with different flex-grow values, so they share the space proportionally (1:2:3)
Exercise 3 — Understanding flex-grow Proportions
If you have three flex items with flex-grow values of 1, 2, and 5 respectively, how will they share the available space?
Options
• The first item gets 1/8 of the space, the second gets 2/8, and the third gets 5/8
• All items get an equal amount of space
• The first item gets 5 times more space than the others
• Only the item with flex-grow: 5 will grow, the others will stay at their original size
Hint : Think about how flex-grow works as a proportion of the available space and how the total of all flex-grow values affects the distribution.
Exercise 4 — The flex-shrink Property
The
flex-shrink
property determines how much a flex item will shrink relative to other items when there isn't enough space in the container.
Key points about flex-shrink:
- It accepts a unitless value that serves as a proportion
- The default value is 1 (shrinks equally)
- Higher values mean the item shrinks more
- A value of 0 prevents the item from shrinking
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
width: 400px; /* Narrow container to force shrinking */
margin-bottom: 20px;
}
.item {
padding: 10px;
text-align: center;
color: white;
}
/* Default shrinking (flex-shrink: 1) */
.default-shrink .item {
background-color: #2196F3;
width: 200px; /* Total width would be 600px, but container is 400px */
}
/* Different shrink rates */
.diff-shrink .item1 {
background-color: #FF5722;
width: 200px;
flex-shrink: 1;
}
.diff-shrink .item2 {
background-color: #9C27B0;
width: 200px;
flex-shrink: 2; /* Shrinks twice as much */
}
.diff-shrink .item3 {
background-color: #FFC107;
width: 200px;
flex-shrink: 3; /* Shrinks three times as much */
}
/* No shrink */
.no-shrink .item1 {
background-color: #4CAF50;
width: 200px;
flex-shrink: 0; /* Won't shrink */
}
.no-shrink .item2 {
background-color: #9C27B0;
width: 200px;
flex-shrink: 1; /* Will shrink to accommodate item1 */
}
</style>
</head>
<body>
<h3>Default flex-shrink: 1 (equal shrinking)</h3>
<div class="container default-shrink">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>Different flex-shrink values: 1, 2, 3</h3>
<div class="container diff-shrink">
<div class="item1">shrink: 1</div>
<div class="item2">shrink: 2</div>
<div class="item3">shrink: 3</div>
</div>
<h3>No shrink (flex-shrink: 0) vs shrink</h3>
<div class="container no-shrink">
<div class="item1">shrink: 0</div>
<div class="item2">shrink: 1</div>
</div>
</body>
</html>
In the example above:
1. The first container shows items with default flex-shrink (1), so they all shrink equally
2. The second container shows items with different flex-shrink values, so they shrink proportionally
3. The third container shows one item that doesn't shrink (flex-shrink: 0) and one that does
Exercise 5 — The flex-basis Property
The
flex-basis
property defines the initial size of a flex item before any available space is distributed according to the flex-grow and flex-shrink properties.
Key points about flex-basis:
- It specifies the initial main size of a flex item
- Can be a length (px, em, %), auto, or content
- Default value is auto (use the item's width or height)
- It's used as the starting point before growing or shrinking
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
height: 100px;
margin-bottom: 20px;
}
.item {
padding: 10px;
text-align: center;
color: white;
}
/* Different flex-basis values */
.basis-example .item1 {
background-color: #FF5722;
flex-basis: 100px; /* Start at 100px */
}
.basis-example .item2 {
background-color: #9C27B0;
flex-basis: 200px; /* Start at 200px */
}
.basis-example .item3 {
background-color: #FFC107;
flex-basis: auto; /* Use item's content width */
}
/* flex-basis vs width */
.basis-vs-width .item1 {
background-color: #4CAF50;
width: 150px; /* Regular width */
}
.basis-vs-width .item2 {
background-color: #2196F3;
flex-basis: 150px; /* Same size, but using flex-basis */
}
/* flex-basis with flex-grow */
.basis-with-grow .item {
flex-grow: 1; /* All items grow equally */
}
.basis-with-grow .item1 {
background-color: #FF5722;
flex-basis: 100px; /* Starts at 100px before growing */
}
.basis-with-grow .item2 {
background-color: #9C27B0;
flex-basis: 200px; /* Starts at 200px before growing */
}
.basis-with-grow .item3 {
background-color: #FFC107;
flex-basis: 50px; /* Starts at 50px before growing */
}
</style>
</head>
<body>
<h3>Different flex-basis values</h3>
<div class="container basis-example">
<div class="item1">basis: 100px</div>
<div class="item2">basis: 200px</div>
<div class="item3">basis: auto</div>
</div>
<h3>flex-basis vs width</h3>
<div class="container basis-vs-width">
<div class="item1">width: 150px</div>
<div class="item2">flex-basis: 150px</div>
</div>
<h3>flex-basis with flex-grow: 1</h3>
<div class="container basis-with-grow">
<div class="item1 item">basis: 100px</div>
<div class="item2 item">basis: 200px</div>
<div class="item3 item">basis: 50px</div>
</div>
</body>
</html>
In the example above:
1. The first container shows items with different flex-basis values
2. The second container compares the use of width versus flex-basis
3. The third container shows how flex-basis works with flex-grow
flex-basis vs width/height
In a flex container, flex-basis takes precedence over width (for row) or height (for column). However, if flex-basis is set to auto, then the width/height is used.
Exercise 6 — Setting flex-basis
Complete the CSS to create three flex items with different initial sizes using flex-basis. The first item should start at 50px, the second at 100px, and the third at 150px.
.container {
display: flex;
border: 2px solid black;
}
.item1 {
background-color: red;
flex-____ ____;
}
.item2 {
background-color: blue;
flex-____ ____;
}
.item3 {
background-color: green;
flex-____ ____;
}
Options: basis grow basis grow basis grow 50px 100px 150px
Hint : Remember that flex-basis sets the initial size of flex items before any growing or shrinking occurs.
Exercise 7 — The flex Shorthand Property
Even though it's important to understand the individual properties, you will often use the
flex
shorthand property to set all three flex item properties at once.
The
flex
property is a shorthand that lets you set
flex-grow
,
flex-shrink
, and
flex-basis
in a single declaration.
Syntax:
flex: [grow] [shrink] [basis]
For example:
flex: 2 1 100px
means grow factor 2, shrink factor 1, base size 100px.
But in practice, most of the time you'll just use
flex: X
(
X
being a number). It's simple and making element grow to fill available space.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
height: 100px;
margin-bottom: 20px;
}
.item {
padding: 10px;
text-align: center;
color: white;
margin: 5px;
}
/* This is what you'll use 99% of the time */
.flex-example .item {
flex: 1;
background-color: #2196F3;
}
/* One example with full syntax */
.flex-detailed .item1 {
flex: 2 1 100px; /* grow: 2, shrink: 1, basis: 100px */
background-color: #FF5722;
}
.flex-detailed .item2 {
flex: 1 1 100px; /* grow: 1, shrink: 1, basis: 100px */
background-color: #9C27B0;
}
</style>
</head>
<body>
<h3>flex: 1 (what you'll actually use)</h3>
<div class="container flex-example">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<h3>Full syntax example (rarely used)</h3>
<div class="container flex-detailed">
<div class="item1">flex: 2 1 100px</div>
<div class="item2">flex: 1 1 100px</div>
</div>
</body>
</html>
Exercise 8 — Understanding the flex Shorthand
What does the CSS declaration
flex: 2 0 200px;
mean?
Options
• The item will grow with a factor of 2, won't shrink, and starts at a size of 200px
• The item will grow with a factor of 0, shrink with a factor of 2, and have a width of 200px
• The item will grow twice as fast, shrink 200 times more, and have an initial size of 0px
• The item will have a minimum width of 2px, maximum width of 200px, and won't grow or shrink
Hint : Remember the order of values in the flex shorthand: flex-grow, flex-shrink, flex-basis.
Exercise 9 — Match Flex Properties with Their Purpose
Match each flex property with its correct description:
Items to match
• flex-grow
• flex-shrink
• flex-basis
• flex: 1
Definitions
• Controls how much an item will grow relative to other items
• Controls how much an item will shrink when there's not enough space
• Sets the initial size of an item before growing or shrinking
• Shorthand that makes items grow equally, allows shrinking, and starts from 0%
Exercise 10 — Using the flex Shorthand
Complete the CSS to create a simple layout with three sections. Use the flex shorthand to make the first and third sections equal size, and the middle section twice as big.
.container {
display: flex;
height: 200px;
}
.sidebar {
background-color: #FF5722;
flex: ____;
}
.main-content {
background-color: #2196F3;
flex: ____;
}
.sidebar-right {
background-color: #4CAF50;
flex: ____;
}
Options: 1 2 1
Hint : Perfect! You used the simple flex shorthand: flex: 1 for equal sizing and flex: 2 to make an element twice as big. This is what you'll use in real projects - no need for complex grow/shrink/basis values most of the time!