flex-grow in CSS – How to Add Left-Over Space to Flex Item
flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.
What is a left-over space?
A left-over space refers to the space remaining after browsers have deducted the sum of all flexible items' sizes from the flexbox's size.
Here's an example:
- CSS
- HTML
section {
display: flex;
justify-content: flex-start;
background-color: orange;
margin: 10px;
}
div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}
.flex-item3 {
flex-grow: 0.5;
}
<section>
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</section>
We used the flex-grow
property to make browsers add half of <section>
's left-over space to flex-item3
's size.
info
flex-grow
's default value is 0
.