If you have used Flexbox before in CSS, you might have used the shorthand property flex: 1. And if you’re like me, you might have been using it but forgotten or not even known what this is shorthand for.
I know to use this shorthand when I have Flexbox items that I want to take up the rest of the space. It’s perfect for situations where you have an image on the left and a box of text on the right (product image and product name + price).
The shorthand translates to the following:
flex-grow: 1flex-shrink: 1flex-basis: 0
We won’t explain what each property does in detail because you have most likely used the non-shorthand versions before. But, we know this tells the browser we want an element to grow and shrink to the available space inside the Flexbox element.