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.2 Nested Flexible Boxes

In this lesson, you will discover just how flexible the Flexbox model can be as you nest one Flexbox container inside another to help out with more complex layouts.

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.2 Nested Flexible Boxes

Hello, and welcome back. In this lesson, we're gonna pick up where we left off in our last lesson and we're gonna talk about how we can nest columns or nest Flexbox containers in our layout. So we've got our left column and a right column. On our right column, I'm gonna change a couple of things. First of all, let's scroll down to where that aside element is with the class of sidebar. I want to shorten up the text on some of these items. I wanna make these a lot smaller, each of these smaller panels here. So that makes each of them a little bit smaller. And I also want to change this size there. I'm going to jump into our CSS and we're gonna make some changes to our sidebar. So inside the sidebar, we'll create a new rule for the sidebar class and inside that sidebar class I'm gonna point to the H3 element. H3 element is gonna represent this item here and I'm just gonna make that smaller. We're gonna set our font size here to maybe 14 pixels. And I'm also gonna set our margins for these H3s to zero so there's not a lot of space above and below it. And then we'll skip a couple of lines, and we'll create a new rule for the paragraphs inside of our sidebar. And we'll set the font size for those to a smaller size as well, maybe about 10 pixels. That's gonna be pretty small. Maybe we'll bring that up to 12. And there we go. That's not too bad. So what I wanna do now is I wanna space these out. You'll notice there's a lot of extra space down here at the bottom, so I wanna space these out vertically. Now we could try to do that with margins, but again as we saw with our navigation menu, it's kind of tricky to try to do it that way. So we're gonna do exactly what we did with our navigation menu but we're gonna do it using columns instead of rows. And we're going to have to nest an extra Flexbox container inside this sidebar in order to do that. So we have a large Flexbox container which contains our two columns, and then we're gonna have another Flexbox container which is simply going to be this second flex item here, this second column. And then the flex items inside that second one are gonna be these four items. So let's go into our HTML, and again, this aside element with a class of sidebar is going to be our nested Flexbox container. And then each of these panels inside that is gonna be a separate item inside that second container. So let's go back to our CSS. We've already got a rule for our sidebar class here and we've given it a flex size of one so that it's one-third the size of our main content, but we're also going to set its display to flex so that that second column is now a Flexbox container as well. Now by default, anything you set to a display of flex is going to set itself up using rows instead of columns. So we need to change that, and we're gonna change that using the flex-direction property. And we're just gonna change that to column. So now our width goes back to where it needs to be. It had to stretch out there for a little bit because it had to fit all of those columns in there. But now we've just got one column and we have a little more flexibility now. So now we can do what we did with our navigation menu by spacing these out. Now we spaced them out before when our flex direction was set to row, so that it stretched them out horizontally, or spaced them out horizontally. Well, we're gonna use the exact same rule we used before, or the exact same property we used before, which is called justify-content. Again this justify-content property always uses the main axis to distribute or align the flex items. When our main axis was going from left to right or horizontally it spaced them that way. Right now, our main axis is the vertical axis. So it's going to space them vertically. So we're gonna do the same thing we've done. We've got two different spacing values we can use here. We can use space between, which will set the first item at the top and the last item at the bottom, and then space them out evenly in between. Or we could use the other one which is called space around. Now for our menu, we ended up using the space around. But for this one I want to use the space between. I want our first item to be all the way at the top, our second one to be, our last one excuse me, to be all the way at the bottom. So again we'll just change that back to space between and now we have it like we wanted it. And if we have less content, here for example, if we go back to our HTML and maybe get rid of a sentence or two here, as this column changes height, the column on the right is gonna change height as well. So that there will no longer be quite as much space in between each of these items. So that spacing is automatically calculated based on the total height of that item. So again, that makes this a very flexible way to lay out our content. So that's how you can nest Flexbox containers. Thank you for watching. And I'll see you in the next lesson.

Back to the top