3-column layout with flexbox

- [Instructor] You can do a simple page layout using Flexbox, although it doesn't offer quite as much flexibility as Grid. For this one, we're going to have a navigation at the top in a nav element, that's on line 15 of our code, followed by three different sections for main content, related items, and a ad, all three of them in a container element. And then, following that, on line 29 we have a footer element. So for a narrow viewport layout, our layout is already good. Starting with a navigation at the top, followed by the rest of the content, this is the order we'd like to see them in on a small viewport.

We don't have to do anything to change the layout. For wider viewports, we want to create a layout with some of the content moved to sidebars. Let's say we think the layout should change at about 600 pixels, going to make the browser window wider. I'm gonna go into the code, I'm gonna add a media query. I'm on line nine, I'm gonna do @media, in parentheses, min-width: 600px, and then my brackets. And then, for the container class, I'm gonna give it a display of flex, container display: flex, and save, go over here and refresh.

Those are the three elements in the middle, which are in the container element. And without any additional styles, each only takes up as much space as it needs, which we'll need to change. We also want to change the order so the main content is in the middle, so let's do that first. Going back to the code, still inside the media query, I'm gonna go on line 13, and for the main class, I'm going to give it a order of two, save and refresh. If we give the main section an order of two, it puts it all the way over on the right, if you remember, the other elements have an order of zero by default.

Let's give those elements an order number also, so everything is where we want it. Going back to the code on line 16, I'm gonna do related and then do an order of one. And then, on line 19 do ads, and then do an order of three. And then save and refresh, and now we have those three sections in the right order. We just need to figure out how wide we want them to be. Let's say we want the middle section to be twice as wide as the other two sections.

We're going to give the two narrower columns a flex value of one, and the main content a value of two. So for main, that's gonna be twice as wide. So I'm going to give it a flex-grow value of two. And then for related, a flex-grow value of one. And for ads, a flex-grow value of one, save and refresh. By using flex-grow, they're altogether going to take up the full width of the page.

The main content with a value of two will be twice as wide as each of the other columns. Now we have a very simple Flexbox layout that changes with the width of the viewport. You can see, if I go back to narrow, it's still the other layout, but here, when it's wider, we're using Flexbox to arrange the content in a different way.