Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Flexbox's source-order independence makes it the perfect tool for building a responsive website navigation.
Resources
Video Review
- It's possible for an element to be both a flex item and a flex container.
Giving .main-header a justify-content: space-between; declaration positions the site name on the left side of the header and the navigation menu on the right:
.main-header {
justify-content: space-between;
}
Related Videos
[MUSIC]
0:00
By now you know that Flexbox gives you a
quicker and easier way to lay out content.
0:04
It's direction, order, space distribution,
and automatic sizing features make
0:09
it an intelligent solution for
building responsive layouts.
0:13
So now it's time to put those new
Flexbox skills into practice.
0:17
Coming up in this section, you're going
to use Flexbox to build the layout
0:20
a simple web page called Best City Guide.
0:23
This web page should look familiar.
0:26
It's the layout you built
in the CSS basics course.
0:28
I'll teach you some of the real world
problems Flexbox can easily solve
0:32
when building a responsive layout.
0:36
For example, switching the direction of a
navigation from vertical on small screens,
0:38
to horizontal on large screens.
0:43
Also, displaying flexible content
columns with equal heights or
0:45
rearranging content order based on screen
size, and the easiest solution for
0:49
displaying a sticky footer.
0:53
So first up,
let's begin building the navigation.
0:55
To follow along using
the latest workspace,
0:58
launch the workspace on this page or
you can download the project files.
1:01
Flexbox's source order independence
makes it the perfect tool for
1:06
building a responsive website navigation.
1:09
You can layout the site logo and
1:12
navigation in one column on narrow
viewport sizes and mobile devices.
1:14
Then in wider viewports and devices,
1:19
the navigation can scale up
to a wider horizontal layout.
1:21
And in the widest view port range
you can position the navigation and
1:25
site logo on the same line.
1:29
So the logo can be aligned to
the left side of the page,
1:31
while the navigation links
are aligned to the right side.
1:35
All this with just a few lines of CSS.
1:38
In the index.html file,
the navigation inside
1:40
main-header consists of an h1 element.
1:45
With the class name containing
the Best City Guide name.
1:50
And the navigation menu is an unordered
list with the class main-nav.
1:54
The base styles for
this webpage are in the file base.css.
2:00
This CSS applies to all
browsers from phones and
2:05
tablets to desktop computers, and at the
bottom of the style sheet there are two
2:09
media queries that center the layout
containers like main-header and row.
2:14
And sets their fluid width in
wider screens and devices.
2:19
You can see all the base styles once you
preview the workspace in the browser.
2:22
So for these lessons only,
I've split up the CSS file so we can focus
2:27
only on the Flexbox layout styles and not
be distracted by all these base styles.
2:32
So we're going to write the Flexbox
styles inside the file flexbox.css.
2:36
Now, normally on your projects you'd
write the Flexbox layout styles
2:41
in the same CSS file, but again writing
them in a separate file will make
2:46
everything in these lessons
easier to explain, and
2:50
just like in previous CSS layout courses,
we're going to use a mobile
2:53
first approach to build this flex box
layout starting with the navigation.
2:57
So we'll use the basic layout styles
to style the web page for small,
3:02
mobile devices first, then using the two
media queries inside flex box.css,
3:08
we'll adjust the layout for wider screens
and devices using flex box properties.
3:13
So first, when the view port or
devise is 769 pixels or wider,
3:19
I wanna use Flexbox to change the vertical
layout of the navigation to a horizontal
3:25
layout, so that it fills the horizontal
space of wider screens and devices.
3:31
So by now you know that the first
step in creating a Flexbox layout is
3:36
defining the flex container.
3:39
So inside the first media query, I'll
select main-header and display it flex.
3:41
So I'll type display: flex.
3:52
So now the name and main-nav elements
inside main-header are flex items.
3:56
So now when the view port is 769 pixels or
wider, the site name and
4:05
navigation are on the same line.
4:10
But the main-nav list items
are still vertically stacked.
4:13
To display them side by side,
4:18
I need to define a new flex formatting
context for the list items.
4:20
In other words, I need to make their
parent main-nav a flex container.
4:25
It's possible for
flex items to be flex containers, too.
4:30
So, I'll make main-nav a flex container
by grouping it with main-header.
4:33
So this means that main-nav can
accept flex container properties,
4:43
and the list items inside
main-nav are now flex items.
4:48
Back in the browser, once I refresh,
the direction of the navigation switches
4:52
from vertical to horizontal
on wider screens.
4:57
So the site name and navigation items
are now laid out on the same line.
5:00
So next, at the 769 pixel break point,
5:04
I'm going to display the site name and
navigation on separate lines, so
5:08
that the header doesn't appear too
cramped on narrow screen sizes.
5:12
I could adjust the layout using
the flex-direction property.
5:17
So back in the media query,
5:22
I'm going to create a new rule
that targets main-header,
5:23
then I'll add the flex-direction
property and set the value to column.
5:27
Then I'll center align
the navigation by setting main
5:32
headers align-items value to center.
5:36
So now the site name and
navigation display in a column direction
5:42
on separate lines, while main-nav
direction remains horizontal.
5:46
Next, when the view port
starts to get wider,
5:50
I want to take advantage of the extra
horizontal space that opens up and
5:53
position both the name and
navigation on the same line.
5:57
The second media query in our style sheet
targets view port widths in devices that
6:02
are 1025 pixels and wider.
6:07
Inside this media query,
I will select main-header and
6:10
set its flex-direction to row.
6:15
Now when the view port is 1025 pixels or
wider,
6:24
both the site name and
navigation appear on the same line.
6:27
Finally, at this width,
I wanna position the site name on
6:34
the left side of the header, and
the navigation menu on the right.
6:36
Now the easiest way to do this is
with the justify-content property.
6:40
Back inside the second media query,
6:45
I'm going to add the justify-content
property to the main header rule,
6:46
and set the value to space-between.
6:51
Now the value space-between
will align the name
6:57
flex item to the left edge
of the container, and
7:02
the main-nav item to the right edge,
and at any extra space between them.
7:05
So back in the browser, the site name
is now flush with the left margin
7:10
of the page and the navigation menu
is perfectly placed on the right.
7:16
Nice.
7:21
So coming up in the next video, we'll
lay out the two columns using Flexbox.
7:26
You need to sign up for Treehouse in order to download course files.
Sign up