Learn how to distribute extra space among flex items.
- [Instructor] Next, we'll look at flex-grow. Flex-grow is similar to the FR unit in grid in that it allows you to distribute the remaining space among the flex items. By default, flex items only take up as much space as the content requires. If you set flex-grow on one or more items, those items will expand to fill the width of the container. Flex-grow is a unitless number, and it has to be positive. So, going into the code, on line 13, for item3, I'm going to add flex-grow one, and save, and refresh.
With one item given a flex-grow value, it expands all the way to fill the available space in the container. If we add flex-grow to another item, over in the code, on line 16, I'm going to have item4, flex-grow one, save, and refresh. So, together, both of those grow to fill the available space. They both have a value of one, so they split the space evenly. If we change the flex-grow value on one of them, they will share the space in proportion to their flex-grow numbers, as long as there is enough available space.
So, item4, I'm going to change its flex-grow value to two, save, and refresh, so now, it's twice as wide as the other one. Flex-shrink is the opposite. It allows you to set which items shrink when there is not enough space for all the items, but first, I'm going to set a width for all of the items. Instead of using the width property, we're going to use a new property called flex-basis. This sets the starting width for the flex items. It actually works pretty much in the same way as width, but since your flex box isn't necessarily horizontal, if you change the flex direction, using flex-basis will work no matter what direction your items are going, whether it's horizontal or vertical.
So I will set the flex-basis on the flex items. I want this to apply to all of them, so I'm going to use the item class, and flex-basis 150 pixels, save, and refresh, and we get this. So, the items start at 150 pixels, but if I make the browser window wider so there's more space to fill, items three and four will expand since we set flex-grow for them already, and then if I make the browser window narrower, since they're flex items, they'll shrink if there's not enough space to have all of them be 150 pixels wide.
They all have the default value for flex-shrink, which is one, so they all shrink by the same amount, but if we change the flex-shrink value for any item, it will tell the item to shrink before the other items. I'm going to go into the code, and for item3, I'm gonna add a flex-shrink value of three, and then save, and go over here and refresh. Back going to the wider viewport width, three and four both grow, but when there's not enough space for them to all be their given size, three is gonna shrink before any of the other items start shrinking.
If we set item5 to flex-shrink five, I'm gonna add this on line 23, save, and refresh, now when we make the browser window narrower, five is going to shrink first, and then three, and then the others. Flex-shrink is also a unitless number, and it has to be positive. The flex property is a combination of these three properties, flex-grow, flex-shrink, and flex-basis.
When using a flex property, after the colon, you have three values separated by a space, grow, shrink, and basis. I'm going to take out all of these other properties that we've given items for flex-shrink and flex-grow, and then on line 16, I'm going to add for item3, flex colon, and then first is grow, I'm going to give it a grow of two, space, one is the value for shrink, and then space, and auto as the value for basis, save, and refresh.
So now, if we go back to where they're all about 150 pixels, three is gonna grow because I gave that a flex-grow value. If I shrink to less than 150 pixels, three will shrink first because I gave it a flex-shrink value.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox