The flex properties are used to control the ratios of flex items along the main axis. The three properties are:
flex-grow
flex-shrink
flex-basis
These flex properties are usually used in their shorthand form of the flex property, the first value being flex-grow, the second flex-shrink, and the third flex-basis.
.item {
flex: 1 1 200px;
}
The value of flex-basis gives a size that the item will have before any growing or shrinking takes place. The flex-grow and flex-shrink properties enable us to control what occurs to the items if there is too much or not enough space for them.