Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Flexbox Layout

Well done!

You have completed CSS Flexbox Layout!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Building a Navigation Bar with Flexbox

7:32 with Guil Hernandez

Flexbox's source-order independence makes it the perfect tool for building a responsive website navigation.

[MUSIC] 0:00
By now you know that Flexbox gives you a quicker and easier way to lay out content. 0:04
Its 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 flexbox.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 device 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
header's 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