You might be already familiar with basic concepts like Flex Container, Main axis, Cross axis, main-start, main-end, But like to remember or recall the things when using flexbox like, Flex Basis, Flex grow, Flex Shrink,
There is an difference using width property when you using flex and without using flex it will act differently, Because it act based on the layout mode whereas when you don't use the flex it will be mode of when you use flexbox it will be flexbox layout mode, And that width constrain and those specification can be described as size
On the general meaning of grow is getting bigger and bigger, As same in the flexbox,
.parent{
display: flex;
}
.child{
flex-grow: 1; // Will take remaining space available
}
By default flex grow will be 0, For example
<style>
.wrapper{
display: flex;
}
.one{
background: pink;
padding: 16px;
font-size: 2rem;
flex-grow: 2; // Flex Grow
}
.two{
background: slateblue;
padding: 16px;
font-size: 2rem;
flex-grow: 2; // Flex Grow
}
.three {
background: orange;
padding: 16px;
font-size: 2rem;
flex-grow: 3; // Flex Grow
}
</style>
<div class="wrapper">
<div class="item one">Shall</div>
<div class="item two">We</div>
<div class="item three">Begin</div>
</div>
Shrink is about consuming available space, Based on the container
.parent{
display : flex;
}
.child{
flex : 1;
}
property has value of flex-grow,flex-shrink,flex-basis