Growing & Shrinking

[00:00:00]
>> Kevin Powell: Now there's another thing with flexbox. We've already seen that items can start to shrink. There's also some other things that can come into play with them, with growing stuff as well, because there's actually three things going on every time we declare a display flex. As soon as we do that, every flex item is getting these three declarations added to it automatically by the browser, which is a flex-shrink of 1, a flex-grow of 0, and a flex-basis of auto.

[00:00:26]
In this course, I'm not going to go into flex-basis. It is a strange property. It's sort of like width, but it also follows your flex-direction. So it's this, a flex-basis is the size of the element on the main axis. Your main axis changes, the flex-basis will change with it. Unless you just leave it alone, if you don't declare one and you're just using widths and heights or you don't have anything there, you have nothing to worry about.

[00:00:51]
There are use cases for it, but it's not very often that I use flex-basis. You're fine just using an inline size on an element or a width on an element if that's what you need. Flex-shrink being one is a really good thing. So let's just say we do our display flex again. Our items will turn to flex items like before, they turn into columns. If we did not have a flex-shrink, we can select our items right here.

[00:01:17]
I have a selector for them. If I say flex-shrink is actually 0, this is like turning it off. Flex-shrink 0 just means don't shrink. These ones look like they're shrinking. They're not actually shrinking, they're just becoming the size of the content. We talked about that before. We also see there's problems below, don't worry about that yet. Again, these haven't shrunk, they've just matched the size of their content.

[00:01:42]
If we go down here, these used to squish when they ran out of room. So flex-shrink doesn't mean don't get smaller, it means get to the size that you want to be. Flexbox wants elements to be the size, but then they're not allowed to squish anymore and they cause overflow. You can see why the default is one, because if it wasn't one, it would be a big problem, and flexbox would basically be unusable or you'd have to declare it every time, so it doesn't make sense.

[00:02:08]
On these big elements, I'm going to zoom out just so you can see, they're all becoming the size that they want to be if their text wasn't wrapping. They're stretching out, they're getting really, really big and going all the way across. So again, flex-shrink is a very good property to have. It works a little bit like FR. You could assign different flex-shrink values to other elements, flex-shrink 1 here, a 2 here, a 3 there, and it's going to influence how much they're shrinking by and distributing the space a little bit differently.

[00:02:39]
It gets complex very fast, and it's very rare that I do that. So, I wouldn't worry about even touching this, turning it off, just use the default and we're completely fine. Flex-grow on the other hand, is a little bit more interesting. These bottom ones down here, they're not going to grow, they're already filling up all of the available space. But over here we have some empty space that's available to us.

[00:03:05]
So if I say flex-grow, and I turn it on by saying one, all of a sudden they start growing to fill up that available space. That's kind of more useful, in certain layouts and in certain situations you can run into where suddenly you're telling the elements, hey, you know what, if there's leftover space, fill it up just so we don't end up with these little empty bits here and there. So, throwing a flex grow one, and in this case, I'm putting it on all the items.

[00:03:30]
I don't really find that very useful. What I find a bit more useful is only applying it to one item. So all of the empty space is going onto this one now. That's something I actually do sometimes. So that one becomes this like weird flexible, taking up as much space as it can element, and the other ones over here, they're just doing their own thing, they're hanging out their regular flex items like they were before.

[00:03:54]
If we start getting too small, they're all allowed to shrink, and so we end up with something that's a little bit more interesting there. And we can also combine this with a flex wrap as well, wrap. These ones aren't wrapping, even though that one's growing, unless we run out of room and start forcing a wrap to happen, it's not going to, but then once the wrapping starts, it will still be pushing as big as it can get, and then once all of them have wrapped, it's going to keep on pushing and filling up all that available space where the other ones, because they're not growing, don't fill up that space.

[00:04:30]
So sometimes you want everything to grow to fill up because you don't want this staggered type of thing to happen as they're wrapping, but a lot of the time you might just want one element to have it. One question I get a lot about this with flex wrap, is there a way to detect when elements have wrapped? No. That would be really cool. It's one of the requests I have. I don't have very many requests for new features in CSS, but there is no way to detect flex wrapping, so you can't change the style once a wrap is kicked in.

[00:04:59]
Now, flex-grow, flex-shrink, they seem a little bit strange at first. One of the use cases I've seen it used for, this is primarily with flex-grow. It's more about taking advantage of how flexbox works. It's a little bit of a hack, but I wanted to show it as part of this course just to show you that there are ways that you can push flexbox's limits to come up with creative solutions. And the first place I saw this was by Hayden Pickering, who introduced this layout pattern, where what I'm doing in this layout, well, let's take a look, the wrapper doesn't really matter too much.

[00:05:34]
I have a width sidebar. The width sidebar has two direct children, so these are my flex items. We have a main content area and a sidebar area. What I've actually done here is I've declared some sizes on these elements. So I'm saying this one should be 300, and this one should be, let's turn off the flex grow actually. We have, so we have these two elements, turn off that flex grow, sorry. So we have these two elements that are living, they're flex items, but because I've assigned sizes to them, they're not trying to be as big as they want to be before.

[00:06:10]
If we don't have an inline size declared on a flex item, the content is what's figuring out how big it's going to be, because it's the content-box that's figuring it out. And it wants to make it as big as it can possibly get. As soon as I tell flexbox how big an element should be, it doesn't try and do that anymore. It now looks at the size that I've declared for that element. Inline sizes can be dangerous, we know that already, but one of the advantages with inline size on a flex item is we have a flex-shrink.

[00:06:40]
So we're never going to run into an issue where the item will cause overflow because it's allowed to shrink smaller than the size that we've set on it. Now, in this case, I also have a flex wrap. So when there's not enough room for both of them, it wraps down onto the bottom. Now I could come on both of these and do a flex-grow of one. We do that on this one too. And the advantage with that now is when the wrap does happen, you can see it's filling up that whole bottom.

[00:07:11]
I mention that, you might want something to fill up the space once it's wrapped instead of being tucked around in the corner or on the side. The problem with a flex grow of one on both of them is now they're growing here as well, and they're both growing. If I have a sidebar, I probably don't want it to actually change sizes. It's kind of weird, my sidebar and the other one are stretching and growing at the same time.

[00:07:35]
And I talked about very quickly how these are the rates of growth. So, if this one had a content or if my content had a flex-grow of 2, now it's actually going to grow and shrink at a faster rate than the other one. Not super obvious, so maybe we make that a flex-grow of 5. And when I do that, now it's growing, you can see how it's growing much faster than the other one. The other one's still changing now.

[00:07:58]
But this is where you can push the limits. We saw this come down here. I could do a flex grow of 100 or any really, really big number. Once the number passes a certain point, the smaller one or the one that has a flex-grow essentially isn't going to grow anymore, just because the other one's taking up all the growth. It's a little bit of a hacky solution in a way, but it takes advantage of how it's working.

[00:08:21]
You can see that now the sidebar's never changing size. As soon as we hit this point where the main area is 500, the sidebar's 300. If we get smaller than that, they can't fit next to one another anymore. So they wrap, and because this does have a small flex grow on it, it will grow to fill the available space. This is where, with flex, I'm having to declare things on the parent to set the stage. You're flexible, do flexy stuff, wrap if we run into a situation where there's not enough room.

[00:08:49]
Now let's jump down to here and set a size on the sidebar, and set a size on the content, and then also come and start manipulating the growth and maybe there's other things you need to change there. So we're playing with a whole bunch of different levers and dials when we're using flexbox to get the layouts to work this way. Some people love this style of layout because in a sense it's a little bit more intrinsic.

[00:09:11]
I'm not using a media query to pick when it's going to happen. I'm basing it on when these elements don't have enough room. Within, I have to pick the size of the elements still, but once they can't fit 500 plus 300, it's going to wrap and figure it out and continue to shrink. Whereas with grid, I can set up much easier with the parent, nice structured layout, and then just use a media query to switch the two of them.

[00:09:32]
Whichever one you prefer is the one that you prefer. Some people like one approach, some people like the other. I find this approach just gets a little bit more complicated because you're jumping between three different things trying to manipulate the situation, but I also see why people like it, and I just wanted to show that this type of thing is possible with flexbox. It's not just these little pieces that are going next to one another all of the time.