Building a Navigation Bar with Flexbox

[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