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

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Exercise: Build a layout with Flexbox, part 1

Exercise: Build a layout with Flexbox, part 1 - CSS Tutorial

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

Start my 1-month free trial Buy for my team

Exercise: Build a layout with Flexbox, part 1

“

- [Speaker] Since we're using the same HTML for all three layout exercises, let's start by switching to the flexbox.css file. This gives us a fresh place to start with just the base presentational styles and no float CSS from the previous layout exercise. Now we can decide which element we can make our flex container. Since the container Div wraps all of the content, we'll use this as the flex container. Let's close the floats.css file and open the flexbox.css file instead. The first thing we'll do is initiate the flexbox layout. In the existing container block. Let's add display set to flex. We also want the items to wrap, so we can style the header and footer on their own row and the nav, main, and side as another row. So we could use the flex-wrap property set to wrap. Then save the file and see how it looks in the browser. By default, the width of a flex item is equal to its content and they line up side-by-side in a…

Contents