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.
Here’s an example:
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.