In the previous tutorials of the "CSS Flexbox" series, you learned that the
flex-grow property specifies how items expand relative to each other to fill up the available remaining space within the flex-container.
You also learned that
flex-shrink sets how items shrink relative to each other if there is not enough space available within the flex-container. The
flex-basis property assigns a fixed, ideal width (or height) to the flex-items.
All these properties can be summed up in one shorthand property, the
Let’s take a look at an example!