From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Sizing multiple flex items

Sizing multiple flex items - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Sizing multiple flex items

“

- [Narrator] 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 one. 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 one and another is set to a flex-grow value of two 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 one will get 1/3 of the extra space and the other will get 2/3 of the…

Contents