4.3 The Flexbox Model

Hello and welcome back to the CSS of the future. In our last lesson, we talked about the grid layout in the level four CSS specification. And we don't have a lot of support for the grid layout just yet. But as you saw in Chrome, we can enable support for it by turning on the experimental web features In the Chrome settings. Well, in this lesson, I want to talk about another layout model that's going to be available in CSS4, and we can actually find more support for it now than we can for the grid layout. And that's called the flex box model. Just like the grid layout, the flex box model allows us to very easily Lay out our content in a grid system. And, as its name implies, the flexbox model is very, very flexible. So let's get started talking about how we can use the flexbox model. I don't want to go into a great deal of detail on it. I just wanna give kind of a high-level overview because I've already created a full series just on the flexbox model alone. So it can be very, very involved. But again, I just want to show you the high-level features for this particular lesson. So if we look at our start file, you can see that we just have some basic content here and these are laid out in separate div's and I've given a background of a darker gray color to our container div. Just so we can kind of get an idea of how everything's laid out. And then our inner div's have a lighter gray background color. And you can find this file in your project files folder under the flex box folder. And the file we're starting is called flexboxstart.html. Now, one of the great things about the Flexbox model, just like with the grid layout system Is that it doesn't matter what order our content is in. We have our container div here, and then inside that div, we have our logo section. Our div here with a class of menu, we have our copyright section, which is gonna end up being at the very bottom of the page. Then we have some featured content, and some sub-content. So again, it doesn't really matter what order we put this content on, in our HTML, we can reorder that content using the flex box model in CSS. I'm gonna scroll back up, and I've given us some starting styles here. I've styled the container with a background color of 888. And then the divs inside that container, immediately inside that container, with a background color of EEE. So it's a lighter grey color, as we already saw. Well, in order to set up our flex box model, we first need to set the display property of our container. And we'll do that here, and we're gonna set it to a value of flex. Easy enough. Just by doing that, if we save our file and jump back into our browser and refresh, you can already see that it's trying to lay out our content in a smarter way. Now obviously, it's not working very well yet, because our content is overflowing. Some of our columns are wider than others even though we didn't really specify how wide we want each of them to be. Our browser kind of does its best at guessing how wide each column should be when we lay out our content like this. So it might seem kind of messy at first, but once we really jump in and start customizing our content or our CSS. You'll be able to see really how powerful this model is. So let's jump back into our text editor, and let's take a look at some of the properties. So still inside our container I'm going to set what's called the flex-flow property, and this is a combination of two properties, I'm not gonna get into too much detail. But we can set it up to work in columns or in rows. Now by default, as we saw, it was in rows. If we go back to our browser, we can see that this is definitely laid out in a row. But if we jump back into our text editor, we can set that to column instead, and it will line it up vertically instead of horizontally. Similarly we can set it to wrap or no wrap. If we set it to wrap, then the content will automatically wrap if it takes up too much width or height, depending on whether we are dealing with rows or columns. So I'm just going to set it to Row Wrap, but for now I want to show you what column looks like, so I'll set it to column wrap for a second, and save that and refresh, and now we can see it's set up in columns. Now, right now there's just one column, but if we had multiple columns, we would be able to see that as well. All right, so I'm going to set this back to row. And we'll set it to wrap. Save that. And now we can see that it's back to kind of it's original shape except that now the items are wrapping onto the next line. So now it's giving each of our divs here enough room for the content inside them, and if we run out of room, it just wraps down to the next line. Very handy. But we still don't have it exactly like we want it. Let's take a look at a few more properties. You'll notice I've created a few classes here to point to our different content. So we have our flex item, which is given to all of our divs inside the container. So each one of these has a class of flex item. Let's take a look at a property here that's simply called flex. And I'm gonna set that to a value of 1. I'm gonna save our file here, jump back over to our browser and refresh. And now we can see that each container here, each item inside this row, has the exact same width. Now, the number that we've given this flex item, this number of one is a ratio. So it deals with the size of the item. So if we were to give one of these items a flex value of 2 and give the rest of them a flex of 1, then the one with the flex value of 2 is gonna be twice as wide as the rest of them. So if we go back to our code here, and let's go to our logo, for example, and set it's flex value to 2. Let's see what happens. We'll save that and refresh and now we can see the the logo section is twice as wide as our other sections. So, again, it's a ratio value. Similarly, we can get the exact same effect if we set all of our flex items to 2. And then set our logo to 4. So it's really just kind of comparing one to the other. It's not a set value, instead it's a ratio. So if we have 2 vs 4 it's the exact same ratio. So if we refresh our page we get the exact same result. Well, I just realized that I'm saving over the flexbox start file. So what I'm going to do, I'm gonna highlight everything and copy it, and then I'm just gonna undo everything that we've just added. Once we get back to the very beginning, get rid of that, and I'm gonna save that as flex box start. Should be back to our original layout, and we are. So now I'm going to save this as flexbox.html. We'll replace that, and then select all our content and paste. And then we'll save that again. And now we'll navigate to flexbox.html. And there we go. So now we can pick up where we left off there. And so again we've got our flex value of 2 set here. I'm going to set that back to a value of 1 because it's a lot easier to deal with it that way. And then I wanna take a look at the order of our items. So, I'm gonna get rid of this flex value here, so for now they're all the same size again. And we can use the order property to change the order of our items. So right now, by default, our order is logo, menu, copyright, feature content, and other content. But we can change that around a little bit. Let's say we still want our logo to be the first one on the page. So we're going to set it's order value to 1. And we still want our menu to be the second item on the page. So, we'll set it to a value of 2. But let's say we want our feature content here to be the third item. So, we'll skip down to the feature and set it's order to three and let's say we want our sub-content to be the fourth item so we'll set its order to 4 and the copy right at the bottom to an order of 5. So we can save that. Go back to our page. And now when we refresh, watch what happens to our copy right. Refresh and the copy right moves to the end. So again, as you can see, we can very easily change the order of our content. Now I want to show you how we can achieve an amazing result just by changing one value for two different items. And what we're gonna do is, we're gonna set the flex value for the logo and the copyright. What I want to do is, I want to make the logo as wide as the stage is, I want to make the copyright div as wide as the stage is, and then I want the rest of these to show up in between them. So let's go back to our code and the way we're going to achieve that is we're going to go down to our logo and we're going to set it's flex value to 1, just like everything else is, but then I'm also going to set it to 100%. That's gonna set it to 100% of the width of its parent container. Then I'm gonna do the same thing for the copyright class. We're gonna set its flex value to 1 space 100%. Save that. And now when we refresh, we can see at the very top our header bar takes up 100% of our width and our copyright bar the footer bar takes up 100% of the width. Then if we want our feature content to be wider than the other two, we can go back and give our feature class here a flex value of 2. Save that and refresh, and now it's wider than the rest of our content. And this is automatically responsive so we resize this we can see our content resizing with our browser. And those are the basics of the flex box model, again there's a lot more to the flex box model than I've shown you here. I just wanted to give you a very brief overview in order to show you just how powerful this can be and how much easier it is just to lay out content this way than it was in older versions of CSS. So thank you for watching and I'll see you in the next lesson.