Sizing multiple flex items - CSS Tutorial

- [Instructor] In the last lesson, we talked about sizing flex items using the flex property. But we applied the same flex values to all of the items within the container. But sometimes you may want to have flex items that are not all the same size. The numerical value used for flex-grow represents a ratio. If you want all items to grow by the same amount, then set the flex-grow to 1. But if you want the items to be different sizes, then define different flex-grow values for the individual flex-items. For example, if one item is set to a flex-grow value of 1, and another is set to a flex-grow value of 2, that doesn't mean that one will be twice as big as the other. Flex looks at the flex-basis value first and applies it if there is space. Any extra space is what gets divided among the flex-grow distribution. So the item with the flex-grow value of 1 will get one third of the extra space, and the other will get two…