11.1 Having content fill a container - Video Tutorials & Practice Problems

<v Michael>One of the most useful applications</v> of Flexbox is having content fill a container. So let's take a look at a diagram to figure out what that means. So by the way, Flexbox was completely new to me. I didn't know anything about Flexbox before this tutorial. So I am in the same position you are in as a reader and watcher of this tutorial. And in fact, I'm still learning a lot about it. So this is gonna be a great review for me. So just gimme an overview here, Leo of what's going on here? <v Leo>There are two main components,</v> so there's always a flex container. <v Michael>Okay.</v> <v Leo>And in this diagram, it's in red.</v> And then there are flex items that are inside the container that are the things that are stretched to fill a space. So the flex container is where you put display flex. And that, that tells the browser that anything inside of this is gonna have flex styles applied to it. And then on the items you define how you want them to respond to changes in size. <v Michael>Okay.</v> <v Leo>So that's a flex declaration under the container</v> and another one under the items. The other thing is that the container can also have a whole bunch of other styles that say how you want to arrange the items, and we'll get to some of that in a little bit. <v Michael>Okay.</v> <v Leo>But in general, the first thing to take away</v> from all this is that you have this container and that's where you define okay, this is a flex thing. And then you have items and you have a set of other styles that get applied to that. <v Michael>Right, so these could be like divs</v> or other similar items. <v Leo>Exactly.</v> <v Michael>Okay.</v> And we've got some notation here, this flex 110 We'll talk about what that means. I'm still kind of figuring out exactly how to how to deal with these things but don't worry about the exact syntax here. We'll be covering it. So this is an illustration of horizontally arranged flex items, right. <v Leo>Right. But we can also arrange them vertically.</v> <v Michael>Yeah.</v> So in this, in this case to solve the problems on this page we wanna look at vertically arranged containers and items. So let's take a look. <v Leo>So here's the diagram of what we'll be doing.</v> The red box is the flex container again. <v Michael>Right.</v> <v Leo>And then inside that flex container</v> we have three main blocks. Okay, just like the horizontal one but now they're a range of vertically. So we've got our header we've got the site content and we've got a footer. <v Michael>Right. So let's review what the content is.</v> So this is the gallery index. So right now this is the content, right. There's just an, I'm a three column page and we can't see it right now. But if we look at the page and look at the source, it's actually there. So we wanna make sure that that gets displayed. <v Leo>Right.</v> <v Michael>Even if it's just a little bit</v> of content like this. <v Leo>Right.</v> So what we're gonna be doing if we look at the diagram again is we're gonna be setting a flex container, that's gonna contain all these things. <v Michael>Okay.</v> <v Leo>Our header is gonna remain fixed</v> at the top of the page. So it's not gonna be changing in size. Our footer is at the bottom of the page, and it's not gonna be changing size either. But what we're gonna have is the middle part is gonna be flexing. <v Michael>Okay.</v> <v Leo>So it will expand to fill space</v> if there's no content there, and that'll push the footer down to make sure that's at least at the bottom of the page or if there's a lot of content in the middle of the page, that blue container will stretch and expand to wrap around all of the content. <v Michael>Okay.</v> <v Leo>Yeah.</v> <v Michael>So at this point,</v> we need to figure out what our container is and what the different items are. <v Leo>Right. Right.</v> <v Michael>So we've got here in our layout,</v> the content which is what we want to be in this middle part. So that should be an item, right? And then we've got the header and the footer those are also items. <v Leo>Right.</v> <v Michael>Okay.</v> So just recall that the header and the footer are both these semantic elements, which are essentially divs so header and footer. So then we need to figure out what this content though. It can be anything. So I think in the text we have that we should add a div with a particular class to make sure that it's like a self-contained. <v Leo>Exactly. It does have to have something.</v> The flex item has to be an element and- <v Michael>Okay.</v> <v Leo>Because that content variable</v> from Jeckyll can be literally anything. It can be one item or it can be a million items. <v Michael>Right.</v> Right now it's like just a bare- <v Leo>Right.</v> <v Michael>Now it's just a piece of text.</v> It's a piece of text. It's not even like a paragraph. It's not even in a tag. <v Leo>So we should put that in a wrapper and,</v> so we can add a div with a class content container. <v Michael>Okay.</v> <v Leo>And then we have to choose what our,</v> here we go what our flex container is gonna be. So we have all of our flex items right now but we need this overall container. That's gonna hold all of them. So we could theoretically wrap all of this in another div. <v Michael>Right.</v> <v Leo>And use that as our flex.</v> <v Michael>Right.</v> Page container or something. <v Leo>Right.</v> Could do that. But you know, that's another div that's in there that basically is just gonna have this one thing attached to it and we can just use the body instead and attach styles to the body tag. <v Michael>Okay.</v> <v Leo>'Cause it's gonna be there anyways,</v> so we can use it. <v Michael>And this is, I mean,</v> this is the body of the page we're talking about. <v Leo>Exactly.</v> And so what we're gonna be doing here is we're gonna be declaring like you see below the diagram on the right. <v Michael>Right.</v> <v Leo>The body's gonna have display flex</v> which will say everything inside is a flexed item and we're gonna change the direction to be column. So that instead of going across the page <v Michael>Like, yeah.</v> So here, this is like the default is across the page, but now we're gonna make it so that it's going up and down to that's flex direction column. <v Leo>And then we're gonna be setting the minimum height</v> to 100 view height, which is, you know 100% of the browser window. So that will make sure that no matter how little content is in there that red box that is standing in on the diagram for the body, that it'll stretch to be a hundred percent of the browser window. <v Michael>Okay. Let's apply some of those.</v> So where is this gonna go? It's gonna go in the body right here. <v Leo>No, 'cause that's in our, that's in our reset.</v> <v Michael>Yeah. So it should be here.</v> <v Leo>I mean, well, here's actually a good point</v> if you're regularly making websites and you regularly use this technique to do a footer that sticks to the bottom of the page, this is actually the kind of thing that you might want to think about adding to your personal reset that you use on every single site, but for this purpose because it's just this one site we're gonna put it down here in this site specific section. <v Michael>Okay.</v> Well let's just do one thing at a time here. I'm just curious to see how it changes. Probably won't change much at the beginning. <v Leo>Oh it'll will it'll break up.</v> <v Michael>Oh wow.</v> That did change. Look at that. Okay. So what happened here? It's just- <v Leo>Well, what happened there is that the header,</v> because it has position fixed and sizing on it doesn't change in shape because that overrides anything else. But what you can see is there's a very small box on the left or what looks like a small box. That's actually the empty content container that we added. <v Michael>Okay.</v> <v Leo>And then the footer</v> because it also doesn't have any like positioning or you know, width things is also a flex item. And right now, because there's no styles attached to it saying, oh, grow or shrink. It's just the width of the content. So it is possible. Like we could actually make that stretch to fill all the rest of the space but we don't want that anyways. <v Michael>Right.</v> And right now they're arranged horizontally but we can fix that. <v Leo>Yes.</v> <v Michael>By setting the flex direction to column</v> <v Leo>And there we go.</v> <v Michael>Okay.</v> <v Leo>And so this is something that you just</v> kind of have to picture in your head, but by setting it to column, we're arranging them vertically which means that the width of each flex item is allowed to expand all the way across the page to fill the whole flex container. When it was horizontal, the height filled the container. Do you see what I'm saying? <v Michael>Yeah.</v> <v Leo>So it was like the natural height</v> of everything that was in there. And then this is like the natural width. Cause we turned it on the side and so it stretched the way across. So now what would happen is in the last one the width was constrained in the flex item. Whereas in this one, the height is constrained. <v Michael>Got it.</v> And that's why so that's why it's extending all the way across. <v Leo>Right, 'cause the flex box is no longer</v> paying attention to the width of it. It's now paying attention to the height of it. <v Michael>And then we also have the min height</v> and we wanted to make that 100% of the viewport height. <v Leo>Yep.</v> <v Michael>Will this change anything?</v> <v Leo>No.</v> <v Michael>Oh, just, just a little bit-</v> <v Leo>Oh yeah.</v> So it altered that, yeah. So now we're gonna direct our attention to the actual flex item that we're gonna have stretch. <v Michael>Okay. And that is</v> <v Leo>Our content container.</v> <v Michael>Right, and so that's,</v> it's this here. So we need to add a new rule for the class. So where should this go in the file? <v Leo>I would put this right after the body</v> because, to me, this is the kind of very fundamental building block of the site that HTML and body are, even if it's something that we're creating and defining. <v Michael>Yeah.</v> All right. So we've got this notation here but we'll be building up to this more compact notation. So we're gonna start off with the specific rules though. <v Leo>Yeah.</v> <v Michael>So I think the most fundamental one here</v> is flex grow. Is that right? So what does that do? <v Leo>Flex grow.</v> We're gonna set to one and that's gonna cause the flex item to expand. <v Michael>So that's this here.</v> <v Leo>Yeah.</v> We'll cover what one means in a little bit, but the idea is that it's a proportion. It's not a value, so it's not like a hundred percent or something like that. It actually relates to the other flex items. But we'll take a look at that in a little bit. <v Michael>Okay. So let's take a look at this here.</v> <v Leo>But with flex grow set to one,</v> it actually activates it. And so now you can see it expanded to fill. And actually if Michael sets the background to blue or something like that, you'll see that all that white space is actually of the flex container <v Michael>Like, like of the, like here?</v> <v Leo>Yeah.</v> So there you go. That's the container and it has expanded. <v Michael>Right, so that's this here.</v> <v Leo>Exactly.</v> <v Michael>So it's expand.</v> And so if let's just redo it just wanna. So it's actually not here at all. It kind of looked like this white space moved up but that's not what happened. What happened is there's a container somewhere in here that's currently not displaying at all. And then when we do flex grow, the footer gets pushed down eliminating this, this isn't even part of the page, right? Just eliminates this. <v Leo>It's part of the HTML page,</v> but it's actually not even a part of the body. Well, it is part of the body now. So when we set to a hundred percent view height. <v Michael>Oh, okay.</v> <v Leo>That's what happened and why that got pushed down.</v> <v Michael>That border came here. Got it.</v> <v Leo>Yeah.</v> So suddenly, yeah, it it's become activated before when it was all just blank white. It was like the diagram and the book, the RB dragons. It's like a totally un-style section of the pitch. <v Michael>Yeah.</v> Okay. So that's our flex grow. So now we've got a content container but we still don't see this, <v Leo>Right.</v> <v Michael>This content here.</v> <v Leo>The reason for that is we have our fixed header</v> which is 10% of the view height. And because it's set to fixed it's covering up any content that is below it. So what we're gonna do here is we're gonna add some padding to the top of our content container. <v Michael>Okay.</v> <v Leo>And we're gonna make it equal</v> to the height of the header. <v Michael>Yeah. Where was that?</v> It's where was that 10? <v Leo>It's actually, it's getting it from the height</v> of the image of the header logo, which is 10 view height. <v Michael>Right.</v> So that's where I search for it that's what I found this year. <v Leo>Exactly.</v> So because that's the biggest thing that's in the header. That's where the header height comes from. <v Michael>Got it.</v> <v Leo>And then the other thing that we're gonna do</v> is we're gonna add 100% width to the content container. <v Michael>Okay. I just wanna see what this does.</v> <v Leo>Well, the width isn't gonna do anything, so.</v> <v Michael>Oh, okay.</v> It's because it's so short. <v Leo>It's not because it's short.</v> It actually still does fill up the entire page here but some browsers actually require a defined dimension for the width. <v Michael>Okay.</v> <v Leo>This goes back</v> to what I was saying about when it's arranged vertically how the browser is not paying attention to some things and paying attention to other, this is just a, you know cover your butt sort of style that's in there. Just so that the full container has the height is flex growing. So the browser's taking care of that and the width is just gonna be 100% of the page. <v Michael>Okay.</v> <v Leo>Yeah.</v> <v Michael>So with this, now we actually have</v> our text showing up. This is great. <v Leo>Yep.</v> <v Michael>So now we've got our header</v> we've got our content here and then the footer. So that corresponds to these three things. <v Leo>Yeah, and so we've used the flex box</v> to make what's called a sticky footer. And this also used to be a pain to do without flexbox, but let's jump back over to the homepage. 'Cause there's another thing that we have to fix. <v Michael>Okay.</v> <v Leo>So we gave our full hero before</v> a padding top of 10 view height. And now we just moved all of the content down by 10. So if you scroll back up again and then down you'll notice that the, the image is too big once again. <v Michael>Yeah, it is.</v> <v Leo>So if we want it to be exactly</v> the height of the page we need to remove our full hero. <v Michael>So we should get rid of this here.</v> <v Leo>And we need to change the height to 90 view height</v> because now there's going to be this hard coded 10 view height. That's always being eaten up. Now, if you didn't have a fixed header you wouldn't have to do any of this but, we decided to do that. So here it is. So now when we save, this will resize the full hero and it'll be once again, the full height of the window. And when we scroll down, we'll immediately see a black bar. <v Michael>Okay. So we go back here and then refresh.</v> I forgot to save it. <v Leo>No. That was it.</v> <v Michael>Oh, that worked.</v> Look at that. <v Leo>So there you go.</v> <v Michael>Yeah, I see it.</v> <v Leo>And you can see here,</v> if you scroll down to the bottom, keep going the very bottom. The footer is all the way down here at the bottom of the page. And if we go back to our gallery page it'll be at the bottom of the browser window like that. So it responds to the content and if there's not enough content, then the footer gets pushed down to the bottom of the browser window. And if there's more content than a single browser view then the content expands and then the footer is down. <v Michael>Right.</v> And we can look at a couple little diagrams just to reinforce that. Put this one here. And then, so this is like before and after. Right, so we started with this, where everything was stacked up at the top. And so flex grow is zero by default, right? And then here we added flex grow one in our CSS, it's up here. And that caused the content to expand to fill the available space. Is that right? All right. And so this was hard. This used to be hard before flexbox. <v Leo>Yeah, it used to be hard</v> because the only real way to do it was using percentages. And if you'll remember percentage height is kind of weird. It relied on a series of nested divs to do this. And you also had to do weird things like set a negative margin on the footer that was equivalent to the height of the footer to pull it back up onto the... It was very weird. It was, it was a strange thing. Sometimes it caused problems. Sometimes it didn't, but this works every single time. <v Michael>Cool, and this is supported</v> in basically all modern browsers, right? <v Leo>Yep.</v> <v Michael>Which is, which is why we're covering it.</v> I've heard about some other things. There's like a grid system. <v Leo>Yeah, there's a flex grid that allows you</v> to lay out content in nice grids on the entire page or not flex grid but a CSS grid and it works and it's great but it's not fully supported everywhere. So it's one of those things that until it is, use it at your own risk. <v Michael>Right. Cool.</v> All right. Well, this is a huge step forward because even though we hardly have any content here, I can start to see I'm starting to believe that this will actually work. And now that we have cleared this space and have the footer at the bottom, great.