[MUSIC]

By now you know that Flexbox gives you a quicker and easier way to lay out content.

It's direction, order, space distribution, and automatic sizing features make

it an intelligent solution for building responsive layouts.

So now it's time to put those new Flexbox skills into practice.

Coming up in this section, you're going to use Flexbox to build the layout

a simple web page called Best City Guide.

This web page should look familiar.

It's the layout you built in the CSS basics course.

I'll teach you some of the real world problems Flexbox can easily solve

when building a responsive layout.

For example, switching the direction of a navigation from vertical on small screens,

to horizontal on large screens.

Also, displaying flexible content columns with equal heights or

rearranging content order based on screen size, and the easiest solution for

displaying a sticky footer.

So first up, let's begin building the navigation.

To follow along using the latest workspace,

launch the workspace on this page or you can download the project files.

Flexbox's source order independence makes it the perfect tool for

building a responsive website navigation.

You can layout the site logo and

navigation in one column on narrow viewport sizes and mobile devices.

Then in wider viewports and devices,

the navigation can scale up to a wider horizontal layout.

And in the widest view port range you can position the navigation and

site logo on the same line.

So the logo can be aligned to the left side of the page,

while the navigation links are aligned to the right side.

All this with just a few lines of CSS.

In the index.html file, the navigation inside

main-header consists of an h1 element.

With the class name containing the Best City Guide name.

And the navigation menu is an unordered list with the class main-nav.

The base styles for this webpage are in the file base.css.

This CSS applies to all browsers from phones and

tablets to desktop computers, and at the bottom of the style sheet there are two

media queries that center the layout containers like main-header and row.

And sets their fluid width in wider screens and devices.

You can see all the base styles once you preview the workspace in the browser.

So for these lessons only, I've split up the CSS file so we can focus

only on the Flexbox layout styles and not be distracted by all these base styles.

So we're going to write the Flexbox styles inside the file flexbox.css.

Now, normally on your projects you'd write the Flexbox layout styles

in the same CSS file, but again writing them in a separate file will make

everything in these lessons easier to explain, and

just like in previous CSS layout courses, we're going to use a mobile

first approach to build this flex box layout starting with the navigation.

So we'll use the basic layout styles to style the web page for small,

mobile devices first, then using the two media queries inside flex box.css,

we'll adjust the layout for wider screens and devices using flex box properties.

So first, when the view port or devise is 769 pixels or wider,

I wanna use Flexbox to change the vertical layout of the navigation to a horizontal

layout, so that it fills the horizontal space of wider screens and devices.

So by now you know that the first step in creating a Flexbox layout is

defining the flex container.

So inside the first media query, I'll select main-header and display it flex.

So I'll type display: flex.

So now the name and main-nav elements inside main-header are flex items.

So now when the view port is 769 pixels or wider, the site name and

navigation are on the same line.

But the main-nav list items are still vertically stacked.

To display them side by side,

I need to define a new flex formatting context for the list items.

In other words, I need to make their parent main-nav a flex container.

It's possible for flex items to be flex containers, too.

So, I'll make main-nav a flex container by grouping it with main-header.

So this means that main-nav can accept flex container properties,

and the list items inside main-nav are now flex items.

Back in the browser, once I refresh, the direction of the navigation switches

from vertical to horizontal on wider screens.

So the site name and navigation items are now laid out on the same line.

So next, at the 769 pixel break point,

I'm going to display the site name and navigation on separate lines, so

that the header doesn't appear too cramped on narrow screen sizes.

I could adjust the layout using the flex-direction property.

So back in the media query,

I'm going to create a new rule that targets main-header,

then I'll add the flex-direction property and set the value to column.

Then I'll center align the navigation by setting main

headers align-items value to center.

So now the site name and navigation display in a column direction

on separate lines, while main-nav direction remains horizontal.

Next, when the view port starts to get wider,

I want to take advantage of the extra horizontal space that opens up and

position both the name and navigation on the same line.

The second media query in our style sheet targets view port widths in devices that

are 1025 pixels and wider.

Inside this media query, I will select main-header and

set its flex-direction to row.

Now when the view port is 1025 pixels or wider,

both the site name and navigation appear on the same line.

Finally, at this width, I wanna position the site name on

the left side of the header, and the navigation menu on the right.

Now the easiest way to do this is with the justify-content property.

Back inside the second media query,

I'm going to add the justify-content property to the main header rule,

and set the value to space-between.

Now the value space-between will align the name

flex item to the left edge of the container, and

the main-nav item to the right edge, and at any extra space between them.

So back in the browser, the site name is now flush with the left margin

of the page and the navigation menu is perfectly placed on the right.

Nice.

So coming up in the next video, we'll lay out the two columns using Flexbox.