7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Flexbox for Page Layout

For years, web designers have relied on floats for website layouts. In this lesson, you will lay out an entire web page using Flexbox, which will automatically solve the issue of equal column heights.

Relevant Links

1 lesson, 00:39


2.Project 1: Flexbox Menu
2 lessons, 11:59

Basic Menu Styles

Styling the Flexbox Menu

3.Project 2: Complex Layouts
2 lessons, 12:16

Flexbox for Page Layout

Nested Flexible Boxes

4.Project 3: Banner With Centered Content
1 lesson, 07:25

Vertically and Horizontally Centered

5.Project 4: Ordered Content
1 lesson, 05:23

Changing the Order

6.Project 5: Image Grid
2 lessons, 10:03

Basic Styles

Using Flexbox to Finish the Layout

7.Project 6: Uneven Image Grids
2 lessons, 12:39

Basic Image Styles

Styling the Grid

8.Bonus Project 1: Flexbox Modal
2 lessons, 11:58

Building the Flexbox Modal

Flexbox Modal Functionality

9.Bonus Project 2: Flexbox Content Slider
1 lesson, 12:49

Building the Slider

1 lesson, 00:38

Final Thoughts

3.1 Flexbox for Page Layout

Hello, and welcome back. In this lesson we're gonna get started on our next project, where we're gonna talk about using Flexbox to lay out an entire webpage. And we're gonna start, in this lesson, by applying a simple Flexbox layout to what we see here. You'll notice we've got two different boxes of content and I want this first box to be our larger left column. And our other box down here at the bottom is gonna be our smaller right column. And we'll see very quickly how the Flexbox layout model makes some things a lot easier for us. So we're gonna start off by doing it the old fashioned way. So you can find the URL for this starting pen in your course notes. And once you open that up, go ahead and click on the Fork button to create a new copy of it and we'll start making changes with this new copy. So let's say we wanted to do this the old fashioned way using floats. So we could jump into, well all first of all let's look at our HTML. So we have a div with a class of container that contains both of our large sections of content. It contains this first box here, as well as a second box down here at the bottom. Now our first section of content up at the top is contained inside a section element with a class of main-content. If we scroll down here, you can see the end of that section element here. And then our sidebar is this second element here, it's the aside element with a class of sidebar. So we're going to float the main content section to the left and we'll put the sidebar to the right. So let's jump into our CSS. You can take a look at the CSS rules that have already been applied for our basic styles that we already see over here on the right. And and we can move forward. So we have certain styles applied to both our main content and our sidebar. But we don't have any rules yet, specifically, just for the main content class, which again is gonna be this left column. So let's come down here to the bottom. Skip a couple of lines, create a rule for .main-content. So let's say we want this to be, set the width here to let's say about 500 pixels. And we see the width does change. And I'm also going to float it to the left. When we do that, we see that our second column immediately shows up over here on the right. But it's right up against that first column, so there's no space in between them. But if we make a new rule for our sidebar class, which is that second large block of content, we can set it to float to the left as well. And let's also set its width to something smaller, maybe about 200 pixels. And there we go. So we can see that our layout looks pretty good at first. But if we scroll down, we'll see a common issue with layouts like these, and that's that our columns here are not equal height. Now depending on your layout, that might not matter to you. For this particular layout, it's not really a big deal. But for some layouts, it's important to have those columns the same height. And doing things the traditional way, people have come up with dozens and dozens of methods for getting those columns to be the same height. But the Flexbox model makes this much, much easier. We don't have to worry about floats. We can define our widths in a couple of different ways, we can use the width property or the flex property. And the column heights are automatically going to be the same. So it's gonna be much easier to deal with. So what we're gonna do is, first of all, we need to figure out what item we need to set up as our Flexbox container. Now remember the Flexbox items need to be direct descendants of that Flexbox container. So the Flexbox items are gonna be our two columns here. Our section with a class of main-content and our aside element with a class of sidebar. And so if we go back to our HTML, we can see that the parent of those two elements is this div with a class of container. So that container class is what we're going to set up as the flex container. So let's jump into our CSS. Let's scroll down to the very bottom. And I don't think we have a rule yet for the container class and we do not. So we'll go down to the very bottom, skip a couple of lines, and I'll create a new rule for the container class. Here I'm gonna set the display property to flex. And I'm also gonna turn off our floats here. And I'm gonna turn off our widths and there we go. So we can see that our browser has made some assumptions about the width of our content for these two items. You'll notice we've taken the width out of our CSS, but it still made this first column's with a lot wider than the second column. And we can still specify how wide those columns are gonna be, just like we did before. Let's say we wanted them both to be 300 pixels. Well, we've gotta actually use the width property here, there we go. Set the width of that to 300, we'll set the width of the second one to 300, and we can do it that way. But we can also, as I mentioned, use the flex property. So let's say we wanted our left column to be twice as wide as our right column. Well the flex property allows us to use an arbitrary numbering system to determine the widths. So if we set our flex here to 2 for our main content and for our sidebar, set our flex to 1, you'll see that the left column is now twice as wide as the right column. And this would work out the exact same way. Just to prove to you that this is completely arbitrary, if we set our first column's flex value to 100 and our second column's value to 50, you can see that the first column is still twice as wide as the second column. So again, these numbers are completely arbitrary. I'm gonna set the first one to 3, and I'm gonna set the second one to 2 and you'll see they're a little bit closer. Let's set the the second one here to 1 so that the one on the left is three times as wide as the one on the right. So we've done that, and now as we scroll down towards the bottom, we can see that our first column automatically stretches out so that it's the same height as the column on the right. If our first column had more content than the column on the right, then the right column would end up stretching down to match that height. So it's very easy to take care of that matching heights problem when you're using the Flexbox model. So let's save our work there. And in the next lesson, we'll talk about how we can nest these Flexbox containers using more than one Flexbox container in a given layout. So thank you for watching and I'll see you then.

Back to the top