CSS In-Depth, v2

# Flexibility & Shorthand

Check out a free preview of the full CSS In-Depth, v2 course:
The "Flexibility & Shorthand" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

## A key to flexible layout is the flexibility of individual flex items. In this section, Estelle explains flex-grow, flex-shrink, and flex-basis. The growth factor determines whether items can grow, and defines how much they can grow proportionally to other growable items. Similarly, flex shrink factor sets how much items can shrink if there isn't enough space for them to fit without wrapping. Flex basis defines the basis of each flex item before growth or shrinking occurs, thereby defining whether there is room for flex items to grow, or whether shrinkable flex items need to shrink.

Get Unlimited Access Now

Transcript from the "Flexibility & Shorthand" Lesson

[00:00:03]
>> Estelle: So we've talked about controlling the placement. But we actually haven't talked about making it pretty yet. So now that we have all of these items we want to make them grow, and shrink, and to be the right size. So for that we have flexibility. So we have three properties that are actually part of the flex shorthand.

[00:00:25] And you are highly encouraged to use the flex shorthand and not the flex-grow, flex-shrink or flex-basis. But we're gonna cover the flex-grow, flex-shrink and flex-basis so you fully understand them. That way you fully understand what you're writing when you write the shorthand. So the flex-grow basically says if you have any extra space, if there's any available space, how do you divide that up among the flex items?

[00:00:52] You divide it up among the flex items that have a flex-grow value of anything greater than zero.
>> Estelle: Proportionally based on that value. So if you have one that has 0.1, one that has a value of 1, and one that has a value of 2.
>> Estelle: Let's say you have 210 pixels, no, 310 pixels.

[00:01:17] The one that says 2 will get 200 pixels, the one that says 1 will get 100 pixels. And the one that says 0.1 will get 10 pixels, and that is not actually accurate, because it's gonna be off by a little bit. It's basically you have 3.1 flex-growth factors, and you have to divide, whatever.

[00:01:41] Okay, then you have flex-shrink, and that's if there's not enough room and items are allowed to shrink, how much to they shrink proportionally? And they shrink proportionally based on their shrink factor. And then you have flex-basis which says, okay, what is the starting size of this element and how much should it grow or shrink?

[00:02:03] So here, we have a flex container, it's displayed flex and it has flex-flow of row and wrap. Just like all the other A through Zs, but it looks different. It looks different because, as I said, every odd element should be allowed to grow and it should have a starting width 220 pixels.

[00:02:28] So that does not mean it's going to have 220 pixels.
>> Estelle: Because it really also depends on what the other words are. So xylophone, pterodactyl, janitors, nincompoop, valentine, petunia, this is gonna sound, well if someone was actually transcripting this would sound really weird. But all of the ones that aren't allowed to grow are the width of their content.

[00:02:56] Their flex-basis is basically their content and that's it, they're not growing, they're not shrinking. Remember when, as I said, if I said no wrap, yeah no wrap, alphabet is 220 pixels, banana is the size of it's content. Crayons is 220 pixels, dinosaurs is the size of it's content and eggplant is 220 pixels.

[00:03:26] Now if I allow it to wrap, you see that part of the one that starts with the F? You can see part of it, right? If I allow it to wrap, the foundation goes down to the next line and eggplant, crayons, and alphabet actually grew, because it has a growth factor of 1.

[00:03:45] So don't worry if you don't understand this right now, I just wanna show you what we're coming up with and what we're trying to fix. And then at the end of this section, you'll understand how to do this. So it's basically saying by default, make it 220 pixels, and if there's any room to grow, divide it evenly among all those that have a growth factor.

[00:04:08] So this has a growth factor of 1, this has a growth factor of 1, and this has a growth factor of 1. We had about 30 extra pixels, so these are actually, probably, 230 pixels, 230 pixels, and 230 pixels. And what we can do is.
>> Estelle: We can go to the kittens, and go to, eggplant was one of the ones that was able to grow, right?

[00:04:35] Computed it's 228 pixels wide, so we got about 8 pixels.
>> Estelle: Okay, so flex, I basically said, flex 2 for a and b and flex 1 for c. So that sets two growth factors, flex-grow.
>> Estelle: The reason that comes out looking different is because C has way more text.

[00:05:21] So that's why it's important to understand everything. So basically here, it's saying the flex-basis is zero, for A, B and C because I used the short hand so, it's 200 and 100. And because A and B have the flex-grow factor, of 2, there's 2 of them right? So that's a total of four growth factors.

[00:05:46] And C has a growth factor of 1, so that's a fifth growth factor. So let's say it's 1,000 pixels wide, which it's not, but let's say it's a 1,000 pixels wide, because that's easy to do the math. Then C would be 200 pixels and A and B would both be 400 pixels.

[00:06:03] And right now it's more likely that it's 150, 300, and 300. And let's do that again, let's look at our debugger, click this, go to computed. 334.
>> Estelle: 334. And 167,167 is half of 334
>> Estelle: Okay, so flex-basis is what is the basis on which it's allowed to grow?

[00:06:36] There's many values. We saw 220 pixels and said basically start with 220 pixels. This thing is 220 pixels wide, and then whatever else is attributed to the growth factor, right? So when you use Auto, Auto says basically, this element is its width. Or it's main size is the main size of its content.

[00:07:01] So the width, in this case the width of its text. So in the first one, the mains, the auto means that the flex-basis is the width of this thing. It's the width of this thing and it's the width of this thing. So this has a flex growth factor of 3, 1, and 2.

[00:07:21] So, let say it has an extra 120 pixels, right, there's 120 pixels of free space. So here it would have 10 pixels, 10 pixels, 10 pixels, 10 pixels, 10 pixels, 10 pixels, it would have three on each side. Here it would have one on each side and here it would have two on each side.

[00:07:39] It basically divided that extra space into six parts. And then gave each one of those flex items. 1/6 when the flex plural factor is one, 2/6 or 1/3 when the flex plural factor is 2, and 50% of the flex plural factor when the factor is 3. Because the default was auto, thats a tiny little space.

[00:08:06] When the flex-basis is zero, it means by default the width is zero. The width of this element is zero. So, a hundred percent of the width of the container is the available space to be divided among the course factors. And so, the flex side among the right gets 3/6th of that or half of it.

[00:08:27] The one in the middle gets one-sixth of it cuz the flex growth factor is one. And the one on the left gets one-third because its flex factor is, growth factor's two so it's two out of six or one-third.
>> Estelle: Does that make sense how does was this distributed?

[00:08:45] It's really important to understand the difference between auto and zero.
>> Speaker 2: So auto [COUGH] just Takes into account actual content and zero disregards and just divides the space equally.
>> Estelle: So it could've been instead of zero percent it could have been 100 pixels and so each one of those would be 100 pixels would be attributed to each one and then the rest of the available space would be divided amongst the growth factors.

[00:09:12] So when you have zero, it means by default it's zero pixels wide so everything is available space. When you don't say what the flex basis is, when it defaults to auto or you set it to auto, it says what is the width of the content. We will eventually get the value of content but that is not yet supported in browsers.

[00:09:34]
>> Estelle: Okay.
>> Estelle: So here is a different way of looking at it. We have flex containers. There's not enough available space.
>> Estelle: And so these are allowed to shrink.
>> Estelle: The thing is they will never shrink to less than their longest word. So the content with the comma is the longest word.

[00:10:09] And the word explicitly is the longest word. So even though the three on the right, the three on the right are actually growing, because they have a flex-basis of zero. So the available space should be, the one on the right, you'd think it would be three times the size of the one in the middle.

[00:10:32] But it's still not going to, if it has, it will be as least as wide as its, narrowest, or widest word, because it doesn't want to cut off words. It's not going to make a strip of just one letter; I don't know if anyone here uses- like I use squirrel-mail- And half the time that I get mail.

[00:10:52] it's just one letter all the way down. And I'm like, it's not possible to read this and I'm not going to try. And that's when I drew a resource and tried to find out what they were actually writing. Here, it is basically to show that even though you have a flex-basis of zero, it's still going to try to fit because it's basically, it's dividing up the available space.

[00:11:17] But it's also saying, I wanna fit the content.
>> Estelle: Okay.
>> Estelle: When you look at the slide and you're like, what was I trying to prove? Okay. So, number B is of the order negative one, and it has a flex of 40%, which means it's allowed- all of them have a flex of 20%, so it would be one fifth the size- and this one has a flex of 40%.

[00:11:52] and it's actually twice the size of the others.