Flex Item Basis

[00:00:00]
>> Jen Kramer: So I also talked about, the flex item, which is the flex item, is that the period or is that the child?
>> Speaker 2: Child.
>> Jen Kramer: Child, that's the child, right? The flex items are the children. So, this is something that you'll want to pay attention to. So right now we have all of these boxes here on this page.

[00:00:19]
And you'll notice that they're as big as their content, and they look kinda messy, don't they? They look messy because they're all different sizes. Wouldn't it look nicer if these were all the same size? That would be way better, it would look way prettier. So, there's a way that we can do that, but we're not gonna use the width property.

[00:00:40]
So width property is basically what the width property says is, make it this wide all the time, if it's 25% wide, it's 25% wide no matter what, it's never 24.9, it's never 25.1, is always 25%, makes sense? We have a different property we use in flexbox, it's called flex-basis, and flex-basis is responsible for the width here.

[00:01:07]
And it means? Make it 25%, sort of. Or make it some other percent, sort of. In other words, hey, flexbox, if you're trying to fit these boxes onto the line, and it has to be a little more than 25%, or a little less than 25%, that's cool, makes sense?

[00:01:33]
So we have, how many boxes? I have seven boxes. So, how wide should we set our flex-basis here? Let's try setting this to 10%, how about that? So, on our li we'll set our flex-basis to 10%. And so now we have boxes that are all the same size, see that?

[00:01:57]
And they have beautiful spacing, it's so much less messy than what we had before, isn't it? That's just great. And it works beautifully well right here on the page while it's big. What happens is, we start to shrink it up. So your browser is madly doing math, and changing the size of these boxes, see that?

[00:02:21]
Trying to keep them all roughly 10%, and at some point that's gonna fail, poor browser.
>> Jen Kramer: At some point that will all blow up. Okay, so see here? I think one might be starting to get a little narrower than some of the others, can you see how that's happening?

[00:02:44]
Maybe one's a little bit narrower than some of the others. Blog looks a little narrower, shop looks a little narrower, contact looks a little wider. What's going on here? Why did the browser choose to make about and contact, boxes 6 and 7, wider? And box number 4 and 5 are narrower, why is that?

[00:03:04]
Yeah?
>> Speaker 2: The length of the text?
>> Jen Kramer: The length of the text, that's what it is, it's the length of the text. So some of these words are gonna define the maximum width, or the minimum width of the box. It can't be any narrower than the longest word.

[00:03:21]
>> Jen Kramer: Cuz, it's not gonna wrap that longest word. Makes sense? So this is what I mean about it being kinda, [LAUGH] kinda 10%, because, clearly not all of those boxes are 10% wide. Yes.
>> Speaker 2: 10% of what?
>> Jen Kramer: 10% of the width of the parent element, the flex container.

[00:03:41]
>> Speaker 2: The parent element, not of the screen.
>> Jen Kramer: Not of the screen. But it happens to be, that in our situation, the flex container is the width of the screen.
>> Speaker 2: Because a <ul> is a block element.
>> Jen Kramer: Exactly, that's totally right, yeah.
>> [LAUGH]
>> Jen Kramer: So, does this help with flexbox?

[00:04:04]
And that's as far as I'm gonna go.
>> Speaker 2: One more question.
>> Jen Kramer: Yeah?
>> Speaker 2: So, is this flex-basis thing, as opposed to using with, basically the reason you would want to use a flexbox, cuz everything else that we've done, you could just do with margin and padding You could do with margin and padding.

[00:04:19]
>> Jen Kramer: This is gonna solve a bunch of problems for you, the whole flexbox kind of thing. One of the things that it does is, notice that all of my boxes are exactly the same height. If you try the same experiment, say, using floats, or inline-block, or something like that, you're gonna wind up with boxes of different heights.

[00:04:38]
So boxes of the same height is a really compelling reason to use flexbox, that's one of the big, big advantages that it has here. There's also gonna be some advantages once we get a little further onto responsive design, that is also something that's very important. Yes, Jenna.
>> Speaker 2: So do you use this with responsive design?

[00:04:59]
>> Jen Kramer: You will use this with responsive design, correct, correct. And hopefully we'll get to that this weekend. So this is just a tiny little bit of flexbox file this away, you're gonna need this for your next assignment. Go ahead and, let's see. So I think that's pretty much everything I wanted to cover here.

[00:05:20]
That's the tiniest little bit of flexbox that you'll ever get, [LAUGH] a tiny, little dollop of flexbox. We've covered floats, we've covered inline-block, we talked a lot about the box model, not quite everything but a lot of it.