02 CSS DISPLAY FLEX CHILD

Define the size of the elements in terms of the space it leaves as available space. If the property is set as auto the browser looks if the item have size and use it. Otherwise, the content size is used as flex-basis. Specifies the initial length of the item

This property is used to specify if the items can grow along the space available. If the property takes a positive value, we say that it could grow from his flex-basis value.

If there are many items with that property, the value represents the proportion of the space that could take.

example in codepen

flex-basis
flex-grow
flex-grow to item2

If we do not have enough space in the container to lay out our items, and flex-shrink is set to a positive integer, then the item can become smaller than the flex-basis.

The flex-grow and flex-shrink are proportions

We can join three properties in one with

.flex-item {
    /*flex: grow shrink basis;*/
    flex: 1 1 200px;
}