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 - HTML Tutorial
From the course: Responsive Layout
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.