Some Stuffs in the Flexbox

Flexbox properties

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,

What is Hypothetical size

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

What is Flex Grow?

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>

What is Flex Shrink

Shrink is about consuming available space, Based on the container

.parent{
  display : flex;
}
.child{
  flex : 1;
}

Flex Shorthand Property

property has value of flex-grow,flex-shrink,flex-basis