11.2 Vertical flex centering - Video Tutorials & Practice Problems

<v Michael>All right, now that we've used flexbox</v> to style this gallery page, it's just a stub but it's looking a lot better now. We're gonna take a look at a section of the homepage, this part right here, and use flexbox to improve its styling. <v Lee>Yeah. This was the last little bit of the homepage</v> and we said we'd come back to it and arrange these things a little more nicely. <v Michael>Yeah, so here we are.</v> And we're gonna be arranging things horizontally inside here, right? <v Lee>Yeah, we're gonna arrange them horizontally</v> but then we want some elements to be vertically aligned. <v Michael>Okay. So let's take a look</v> at a diagram to figure out what that means. <v Lee>So what we're gonna do is</v> we're gonna have the title on the left and the text on the right. <v Michael>Okay.</v> So this, the learn enough story will go over to this side and we'll have the text on the other side. <v Lee>Right.</v> But what we're gonna want is for the title to always be vertically centered in the middle of the flex container. So, it'll look like the right. <v Michael>So like over here?</v> <v Lee>Yeah.</v> So that way we'll have the text will be a full column that will take up the full height of this container and the title will move around and always be in the center. <v Michael>Okay.</v> Now these diagrams are for three columns, but in this case it's just two, right? <v Lee>Right. So if you look at that last one,</v> it would be like if we dropped the column on the right. <v Michael>Yeah.</v> <v Lee>Yeah. That's what we're gonna end up with.</v> <v Michael>That's a good little bit</v> of technical sophistication. Just to be able to look at the diagram and be like, "Okay, well three here, is not an important number." Right? <v Lee>Right.</v> <v Michael>So it could be two or it could be five.</v> This is the kind of thing where flexbox gives us the flexibility, so to speak, to deal with a large number of different items. <v Lee>Right.</v> And so here you see one of the other things that you can do with flexbox. Which is, the default for flex items is for them to stretch and fill the space, the way that we talked about in the introduction to this chapter. But you can also have them be the height that the content inside makes them and then move around where the boxes are. So you can have them all be individual heights and be at the top of the flex container, you can have it be at the bottom of the flex container, or you can have it all vertically aligned in the middle. <v Michael>Okay.</v> So that's these different align-items values. <v Lee>Right.</v> <v Michael>So flex start, flex end and center.</v> <v Lee>Exactly.</v> <v Michael>Got it. Okay.</v> So in this case, these rules are being applied to the container, which before, when we were talking about the gallery page was the body, right? Oh no, I'm sorry. Body was... Is that right? <v Lee>Yeah. We were using</v> the body as the container. <v Michael>Yeah. Well, that was like,</v> the overall layout, right? <v Lee>Mm-hmm.</v> <v Michael>I mean, we were looking at the gallery page</v> but that actually applied to all of the pages. <v Lee>Right.</v> <v Michael>'Cause we were doing it in a template.</v> <v Lee>Right. So now we're gonna set</v> a new flex container and- <v Michael>All right. Yeah.</v> So for this, now this is specifically the index page for the overall site, which is here. <v Lee>And so home callout</v> is going to be our new flex container for this example. <v Michael>Got it. Yeah.</v> So this is the flex container. Let me move this over 'cause it's the one we're working on now. And so, let's look at home callout. Okay. So this is our flex container. <v Lee>Mm-hmm.</v> <v Michael>And then the items are, what?</v> We've got an H1, is that one of them? <v Lee>Mm-hmm.</v> <v Michael>And then basically, our items, let me guess.</v> Our items are the H1 with class callout title and then the div with callout copy. <v Lee>That's correct.</v> <v Michael>And that's it, right? Yeah.</v> <v Lee>That's right.</v> <v Michael>Good.</v> What are the rules on what can be an item? Is it like any sort of block element, or? <v Lee>It can be anything.</v> <v Michael>Pretty much anything?</v> <v Lee>Mm-hmm.</v> <v Michael>All right.</v> Okay. We've got home callout right here and what was the other one? Callout title, callout copy. And we've got them right here. So, here's our container and then the two items. So this is where we'll be putting our styles in here, right? <v Lee>Mm-hmm.</v> <v Michael>All right. Let's see if I can guess.</v> So we need display flex to turn on flexbox. <v Lee>And then Michael will rearrange those</v> in alphabetical order. <v Michael>(laughs) All right.</v> I could have done F5 with there too. <v Lee>(laughs) Yeah.</v> <v Michael>I just wanna see what happens.</v> Okay, look at that. And by default it arranges things horizontally, so it's kind of sort of doing what we want already. And then we go back to the diagram. We wanna do align item center to center them vertically in the container. <v Lee>So now we'll add the flex item center</v> and everything will align in the middle of the flex container. <v Michael>Okay. So flex align item center, flex container.</v> So, that's up here. Aha, look at that. <v Lee>So now what we should do though,</v> is rearrange these using styles on the flex items so that the layout is what we want. Which is, for the text to be a little bit smaller in width. Actually, quite a bit smaller. <v Michael>Okay.</v> And to do this, we'll be using flex grow, right? <v Lee>Mm-hmm.</v> <v Michael>As well, and also flex basis.</v> <v Lee>Right.</v> <v Michael>All right. So, I don't understand these.</v> (Lee laughing) <v Michael>Let's take a look at the diagram.</v> So we've gotta, I think I understand flex grow. <v Lee>Right.</v> <v Michael>That just tells-</v> <v Lee>So flex grow just says expand.</v> <v Michael>Yeah.</v> <v Lee>And if everything is set to one,</v> then they all have the proportion. If one of them is set to two, then one is two times as big as the rest. <v Michael>Okay.</v> <v Lee>But for flex basis,</v> flex basis determines how the elements inside the flex container are going to be sized. So by default, it's set to auto. And so, what happens there is the browser looks at the content that is in the flex item. It resizes the boxes based on that content. And then, it equally distributes the negative space, the space where there's nothing, inside of those flex items. So, these are those little areas, they're those little arrows. <v Michael>Mm-hmm. These little arrows. Yeah.</v> <v Lee>So, those little arrows are all the same size.</v> <v Michael>Okay.</v> <v Lee>But the size</v> of the box is different because the content in each of those boxes is different. <v Michael>I have a sense that this is the kind of thing</v> that you don't really go through these logical steps, you just kind of develop an intuition for what flex spaces auto does. <v Lee>Exactly. Right. Exactly. (laughs)</v> Well, it's just a even distribution of the space around your content. <v Michael>Yeah. Makes sense.</v> <v Lee>Which, if you want things to look</v> like they're separated from each other by an equal amount, then this is the right thing to use. <v Michael>Okay.</v> <v Lee>Which is actually a very common usage.</v> Flex base is zero, which is on the left. <v Michael>Mm-hmm.</v> <v Lee>That equally distributes the size of the boxes,</v> no matter what the content is. So in this case, you see the A on the left has a ton of space around it. <v Michael>Right.</v> <v Lee>And the content in the middle does not.</v> <v Michael>So, is that the one we want now for the title?</v> <v Lee>For the title?</v> That's what we want. <v Michael>Okay. Let's take a look what that does.</v> <v Lee>But we also need to set the flex grow too.</v> <v Michael>All right. So, this is</v> actually alphabetical order, which is the normal ordering, but we're gonna be using a more compact way of writing this later on in this chapter. And so, I'm actually gonna keep these in the order represented by that particular kind of syntax. So, this is a rare exception to the alphabetical ordering for CSS rules. So we're gonna start with flex grow and then add flex basis. And we'll see why this order is a good idea as we go through the rest of this chapter. From the perspective of the browser, it doesn't matter. It's just to make it more sensible for us. All right. Let's take a look at the effect of that. Aha, so now we've got these two items. Look at our diagram again. Also, the boxes, should they be all the same size? They look like they're different sizes. <v Lee>It's because we haven't changed the callout copy.</v> <v Michael>Ah, right.</v> We need to change the callout copy. I would guess we're gonna give it the same flex grow maybe? <v Lee>Nope.</v> <v Michael>So, that's kind of weird</v> that we're setting it on the item. It seems like this flex basis applies to all of them but yet, here we're applying it just to one item. It would be like applying it only to this one. Is that right? <v Lee>Right.</v> <v Michael>Like, that's what I get confused by.</v> <v Lee>So, yeah.</v> That is how it's working right now. What's happening is that there's a lot of content that's over on the right. And I think that's- <v Michael>Here?</v> <v Lee>No, no. On our page.</v> <v Michael>Here.</v> <v Lee>Yeah.</v> <v Michael>Yeah. I guess it just seems, to me,</v> that flex basis should be applied on the parent and not on each individual item. That's what I'm confused by. <v Lee>Yeah. I don't know why they made that choice.</v> <v Michael>That's weird. Okay.</v> Well I'm still a little confused, but we'll press forward. Maybe it will be alleviated. All right, let's take a look at the copy here, now that we've added some rules to the title. So what do we wanna do here, Lee? We wanna do something with the, what is it, the flex- <v Lee>Basis.</v> <v Michael>Flex basis.</v> <v Lee>So-</v> <v Michael>This?</v> <v Lee>Right. So using the flex basis</v> is kind of like setting a width for it. You're telling flexbox that, if possible, you would like to use this amount of space. <v Michael>Okay. Yeah.</v> <v Lee>So, we'll try setting it to 45 M.</v> <v Michael>Okay.</v> <v Lee>And without anything else set,</v> what that's gonna tell the browser to do is size the callout copy to be 45 M if there is space for that. So if we open it in a new window... So, it's 45 M right now. <v Michael>Right.</v> <v Lee>Staying 45 M.</v> But now, if it's too small. <v Michael>Ah, yeah.</v> <v Lee>So, it'll start shrinking.</v> So let's say we don't want it ever to shrink, we always want it to be exactly 45 M. <v Michael>Okay.</v> <v Lee>We can set the flex shrink to zero.</v> <v Michael>Okay. So, let's take a look.</v> <v Lee>Instead of the one that it is by default.</v> <v Michael>Right. Yeah.</v> We've got a diagram for this one, if I recall correctly. <v Lee>Mm-hmm.</v> <v Michael>So this is flex shrink.</v> We've talked about flex grow and flex basis. And now flex shrink, determines whether an item, what is it, like shrinks. <v Lee>Right.</v> <v Michael>It describes the behavior.</v> <v Lee>Right.</v> So what you're gonna see here is that with flex shrink set to zero, when we resize the browser window down, that callout copy is gonna stay the same size and push out of the container. <v Michael>Okay. Right.</v> So it's one by default, and now it says zero. <v Lee>Right.</v> <v Michael>Let's take a look.</v> <v Lee>This is a way to hard set</v> the width of a flex item. <v Michael>All right. Yeah. Look at that.</v> <v Lee>Yeah.</v> <v ->So now that we have the set, we can add in</v> a couple extra styles just to make things, in general, look a little nicer. <v Michael>Okay.</v> <v Lee>So, the paragraphs in that callout copy</v> are a little crammed together. <v Michael>Yeah.</v> <v Lee>So, our CSS reset</v> removed the margins on paragraphs. So, one thing that we can do is add back in margin on paragraph in the global section. <v Michael>Yeah.</v> <v Lee>So right now we have that 1.5 line height.</v> <v Michael>And where is it in the reset?</v> Is it somewhere, it's here. <v Lee>It's just in that whole thing. Yeah.</v> <v Michael>So, it's this, right?</v> So there's just a list of things that are getting margin zero, padding zero, border zero. So that's this here? <v Lee>Yeah.</v> <v Michael>In particular,</v> it's the margins that are relevant here. So we wanna change that in the global styles, right? <v Lee>Mm-hmm. And we already have a style for the P.</v> <v Michael>Oh yeah. Right.</v> <v Lee>Paragraphs.</v> <v Michael>The line height.</v> <v Lee>So we're gonna set margin,</v> and we'll set it to three quarters of an M. <v Michael>Okay.</v> <v Lee>On the top and bottom, and nothing on the sides.</v> <v Michael>Okay.</v> <v Lee>Yeah.</v> <v Michael>Let's take a look at that.</v> Should look nicer. <v Lee>Yeah. Just push things apart.</v> Yeah, just a little bit of space between paragraphs is nice. And then the other thing that we should probably do here is we should add ourselves a little bit of padding on that copy. <v Michael>Yeah. Yeah.</v> It's kind of like, right up against the title. It doesn't look very good. <v Lee>Right.</v> So something like three view width on either side of the text. <v Michael>Where it says the callout copy,</v> if we look back here, that's a paragraph inside the callout copy. And actually, so it's on the div though actually. <v Lee>Yeah, we're gonna just do it</v> on the whole callout copy. <v Michael>Yeah.</v> So that's down here. <v Lee>Mm-hmm.</v> <v Michael>So we wanna do, what, add padding here?</v> <v Lee>Mm-hmm.</v> <v Michael>So 3% of the view port width,</v> see how that looks. Oh, yeah. That looks a lot nicer. <v Lee>There we go.</v> And now if we were to resize that, you can see how the whole section changes. So the title gets smaller, but the text doesn't. But then once it gets big enough, the space around the title expands and we have this nice little layout there. <v Michael>Cool.</v> All right, looks like that's working pretty well.