From the course: Responsive Layout

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

3-column layout with flexbox

3-column layout with flexbox - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

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…

Contents