From the course: Responsive Layout
Unlock the full course today
Join today to access over 22,600 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.
Contents
-
-
-
-
-
-
-
(Locked)
Centering content1m 54s
-
(Locked)
3-column layout with grid areas, part 13m 33s
-
(Locked)
3-column layout with grid areas, part 24m 10s
-
(Locked)
3-column layout with flexbox3m 14s
-
(Locked)
12-column layout setup4m 7s
-
(Locked)
12-column layout for medium viewports3m 24s
-
(Locked)
12-column layout for wide viewports2m 58s
-
(Locked)
-