Unlocking the Power of Flexbox: Understanding flex-grow, flex-shrink, and flex-basis
Flexbox is a layout model in CSS that allows elements within a container to be distributed and aligned efficiently. The flex property is shorthand for setting three properties: flex-grow, flex-shrink, and flex-basis. Here's a brief explanation and an example of how they work together.
Flex Properties
- flex-grow: This defines how much a flex item will grow relative to the other flex items inside the same container when extra space is available. The default value is 0 (no growth).
- flex-shrink: This defines how much a flex item will shrink relative to the rest of the flex items inside the same container when there is not enough space available. The default value is 1 (it will shrink if necessary).
- flex-basis: This sets the initial size of a flex item before any space distribution happens according to
flex-growandflex-shrink. The default value isauto, which means the item will be sized according to its content.
Example
Let’s create a flex container with three items and see how flex-grow, flex-shrink, and flex-basis affect their sizes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
width: 600px;
height: 200px;
border: 1px solid black;
}
.item {
border: 1px solid blue;
margin: 5px;
text-align: center;
}
.item1 {
flex: 1 1 100px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 100px; */
}
.item2 {
flex: 2 2 150px; /* flex-grow: 2; flex-shrink: 2; flex-basis: 150px; */
}
.item3 {
flex: 1 0 200px; /* flex-grow: 1; flex-shrink: 0; flex-basis: 200px; */
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
</body>
</html>Output:
Explanation
Item 1: flex: 1 1 100px;
- flex-grow: 1: It can grow, and will take up space proportional to its
flex-growvalue relative to other items. - flex-shrink: 1: It can shrink if necessary.
- flex-basis: 100px: Its initial size is 100px.
Item 2: flex: 2 2 150px;
- flex-grow: 2: It can grow twice as much as Item 1.
- flex-shrink: 2: It will shrink twice as much as Item 1 if necessary.
- flex-basis: 150px: Its initial size is 150px.
Item 3: flex: 1 0 200px;
- flex-grow: 1: It can grow, taking up space proportional to its
flex-growvalue. - flex-shrink: 0: It will not shrink even if there is insufficient space.
- flex-basis: 200px: Its initial size is 200px.
Behavior Analysis
In a container of 600px width:
- The initial total width taken by all items is 100px (Item 1) + 150px (Item 2) + 200px (Item 3) = 450px.
- Extra space available in the container is 600px —450px = 150px.
Distribution of Extra Space (150px):
- flex-grow values:
- Total flex-grow = 1(Item 1) + 2 (Item 2) + 1 (Item 3) = 4 parts. - Space distribution based on flex-grow:
- Item 1: 1/4 * 150px = 37.5px
- Item 2: 2/4 * 150px = 75px
- Item 3: 1/4 * 150px = 37.5px
Total width after growth:
- Item 1: 100px (initial) + 37.5px = 137.5px
- Item 2: 150px (initial) + 75px = 225px
- Item 3: 200px (initial) + 37.5px = 237.5px
The items distribute the available space according to their flex-grow values, and they don't shrink beyond their flex-basis If there needs to be more space.
This example demonstrates how flex-grow, flex-shrink, and flex-basis work together to control the sizes of flex items within a container.
If you enjoyed this post, please hit the follow button and give it a clap. Stay tuned for more exciting topics!
Happy Coding ⌨️
