From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

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

Exercise: Build a layout with Flexbox

Exercise: Build a layout with Flexbox - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Exercise: Build a layout with Flexbox

“

- [Instructor] In the last layout exercise, we started building from the smaller screen and worked our way up. This time, let's start with the larger screen size and work our way down. Since we're using the same HTML file for all three layout exercises, let's first switch to the Flexbox CSS file. All the base CSS styles are the same, but this gives us a clean place to start with no float CSS from the previous exercise. Also, Flexbox gives us the ability to reorder items. So lets go ahead and move the nav back to being after the main content. So I'm going to copy and cut from here, and add it right after the main, before the aside. Okay. Now we can decide which element we can make our flex container. Since this container div wraps all of the content, we can use this. Let's go back to our CSS file and add display flex. Here's our container selector. So I'm going to add display flex here. And I also want the items to…

Contents