7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Styling the Flexbox Menu

Now that you have a solid understanding of the menu structure, in this lesson, you will learn how to use the CSS Flexbox model to painlessly lay out the menu items.

Relevant Links

1 lesson, 00:39


2.Project 1: Flexbox Menu
2 lessons, 11:59

Basic Menu Styles

Styling the Flexbox Menu

3.Project 2: Complex Layouts
2 lessons, 12:16

Flexbox for Page Layout

Nested Flexible Boxes

4.Project 3: Banner With Centered Content
1 lesson, 07:25

Vertically and Horizontally Centered

5.Project 4: Ordered Content
1 lesson, 05:23

Changing the Order

6.Project 5: Image Grid
2 lessons, 10:03

Basic Styles

Using Flexbox to Finish the Layout

7.Project 6: Uneven Image Grids
2 lessons, 12:39

Basic Image Styles

Styling the Grid

8.Bonus Project 1: Flexbox Modal
2 lessons, 11:58

Building the Flexbox Modal

Flexbox Modal Functionality

9.Bonus Project 2: Flexbox Content Slider
1 lesson, 12:49

Building the Slider

1 lesson, 00:38

Final Thoughts

2.2 Styling the Flexbox Menu

Hello and welcome back. In our last lesson, we took a look at the HTML and starting CSS for our navigation menu. And we talked about some of the shortcomings of doing it the old fashioned way. Right now, we're floating these list items to the left and hard-coding the margin around the edges of these list items, of these menu items. Well, in this lesson, we're going to get rid of our floats and we're going to make this work using Flexbox. And we're gonna discover that it not only makes things easier, but it also makes things more flexible. So, you can find the URL for this starting CodePen page in your course notes for this lesson. Once you've opened that up, go ahead and click on the fork button to create your own copy of this project. And then we can start making changes. And the changes we're gonna make are not very much. It's gonna take very, very little HTML to make this more flexible. So we're gonna start off by taking off our float left and our margins for our list items. We're gonna get rid of that and we're gonna handle those using Flexbox. So as soon as we get rid of those, we can see now that each of our menu items is on its own line. They're all stacked on top of each other now. So as a quick review, and we're not gonna go into a great deal of review on Flexbox. If you've never used Flexbox before, then I would highly suggest checking out our Flexbox essentials course. So I'm gonna assume that you already have at least a little bit of familiarity with Flexbox. But I do wanna give you a little bit of a review as far as how things are structured. So we're gonna jump into our HTML. And when you're creating something using Flexbox, you're first gonna have a flex container. And then we're gonna lay out the items within that container, either horizontally or vertically, however you choose to set it up. So our main container here is not gonna be our main nav. It's not gonna be our nav element. Instead, it's going to to be our unordered list. And the reason for that is, when you set up an item as the flex container, then that item's immediate children or immediate descendants are automatically set up as the flex items within that flex container. So when we set it up as the unordered list, then each of these list items are going to serve as the flex items within that flex container. And we can choose to set those flex items up either horizontally or vertically without having to worry about floats. So again, we're going to set up our menu class which is the class applied to the unordered list. We're gonna set that up as the flex container. And then these li's, these list items, will be the flex items within that container. So let's jump back into our CSS, and all we really need to do is to jump into main-nav menu. And remember, before we had our float set on the list items themselves. We're not gonna worry about the list items here because Flexbox will take care of those for us once we define the flex container, which again is going to be applied to this menu class. So inside the rule for this menu class underneath our height, I'm gonna set our display property here. Remember for display, we can either use inline block, inline-block, or now we can use flex, which is what we're gonna do here. We're gonna set it to flex. And you can see immediately that our layout changes and our items are lined up side by side. So all of the immediate children of that menu, which are going to be these list items here, they're automatically by default lined up side-by-side. Because by default, Flexbox treats this as a row instead of as a column. Now we could, inside our menu class, we could change that by setting the flex direction property to either row or column. By default it's set to row, so if we set it to row it won't change anything. But if we set it to column, then you'll notice that these items will be stacked on top of each other. So we don't really need to set that because by default, it's already gonna be set to row. But now we do want to adjust another property, which is going to allow us to adjust the spacing in between these items. So when we're dealing with Flexbox, we have what's called the main axis. And that main axis is determined by whether you're using a row or a column here. If we're using a row, the main axis is the left to right, or horizontal axis. If you're using a column, the main axis is up and down, or the vertical axis. And then we also have the cross axis, which is just gonna be the opposite. If our main axis is horizontal, then our cross axis is going to be the vertical axis. Well, right now, we want to adjust the spacing between these items along the main axis, the horizontal axis here. So if we want to adjust the spacing or the alignment of our content along the main axis, then we're gonna use a property called justify-content. And there are a few different options, for this one option is flex-start, which as you can see is the default behavior. That simply sets it to the start of that horizontal or main axis. There is also a flex-end value, which will basically right align everything if we're using a main horizontal axis. If we were using a vertical axis, then it would nudge them down to the bottom of that container instead of at the top. So flex-start, if our main axis was vertical, would be at the top, and flex-end would be at the bottom. But since we're using a horizontal axis, flex-start is at the left, flex-end is at the right. We can also center things this way. So if we set that value to center, it will just center align those properties or those items. And we could add our own margins in between those if we wanted to. But then we have two options that allow us to adjust the spacing between those items. One of those options is called space-between. As you can see, the space-between option puts one item on the far left or at the beginning of that main axis. The last item at the far right, or the end of the main axis. And then the spacing between each of the items is equalized, so that the space between home and products is the same as the space between products and blog, and between blog and contact. So they're spaced out evenly that way. We have another item, which is the one we're gonna be using here, called space-around. Space-around does something very similar, except you'll notice that home and contact are not at the far edges. Instead, it places an equal amount of space to the left and right of each item, and it spaces it that way. And the great thing about these spacing properties is that now, as we resize the window, we can see that that space is automatically adjusting. And that looks a lot better than it looked before when we had hard-coded left and right margins, for each of these items. And when we do it that way, you can't really automatically adjust the spacing, as we're doing here. Now obviously, this will need some TLC. Once you get down to a certain point, they're gonna become too crowded and they're gonna break down to the next line. So you would still need some kind of media queries in here to break that down maybe into a mobile menu that looks different, or to do something else with it. But for the most part, that works really well. And as we resize our browser window, that spacing in between those items resizes as well. So that's a really good practical use of the Flexbox model to help you properly align your menu items in an unordered list. So thank you so much for watching. And in the next lesson, we'll get started on our second project.

Back to the top