Flexbox Tutorial: How to Align Content Vertically and Horizontally with Flexbox
In this guide, we're going to walk through how we can create a fully responsive nav bar using flex box, HTML, JavaScript, and it's even going to include building out a full toggle functionality for the navigation bar when it's used on a smartphone.
So this is going to be a pretty fun and pretty comprehensive guide. I'm gonna start off here and I'm going to create some HTML5 boilerplate and let's just test our system just to make sure it's working. So create an H1 here and just say Hi there. And if you're using a tool such as gulp and you start from scratch like I have right here then you are going to for your very first time we're going to have to hit refresh so if you followed me in my other guides and you've seen how I've shown you how to build out a gulp watcher then I didn't want that to be kind of a confusing thing for you.
If you saw that no changes were being reflected it's because you have to have a valid piece of HTML and after you have that and you've hit refresh in the browser then you'll start auto-updating just like right there.
So now with all that in place let start building out our NAV component. Now the very first thing that I'm going to create is a wrapper that is going to store all of the nav links and all the elements that we're going to have. So I'm going to say .navbar and that's going to create our wrapper div and now let's add an a link and add a link and the class for this one is going to be brand.
So say class brand and you can put whatever you want in here I'm just going to say my name hit save. Now, you can see that that's been updated on the right-hand side.
Now inside of here, I'm going to have two sets of links so because of that I'm going to create two divs one of them I'm going to call left and then the other one I'm going to call right. And so the ones on the left-hand side are going to contain the links that we want budding up next to the brand component and the ones on the right are going to be all the way to the right-hand side of the nav bar.
Now inside of here, I'm going to say a.link this is going to create an a link that for right now is not going to go to anything but I can just say link 1, duplicate this and we'll have link 2. And now on the right-hand side, we're going to do the same exact thing except now I'm going to have it say Link 3 just so once we actually have it live we'll be able to take a look at it. Now you can see that that's been updated.
This is using no CSS at all right now, so there is going to be no styles and that's what we're going to get into next. So this is going to be about 99 percent of the code that we need to write on the HTML side and now we can start building out our custom CSS styles.
So I'm going to use embedded styles but you could use this inside of some other specific style file. And that's perfectly fine but right here I'm going to have them all in one spot just so it's nice and easy to see. Now you may notice they are on the top and the left-hand side that we have a little bit of margin and that is something that you get by default with HTML.
So what I want to do is override that because I want to have our navigation bar butting up against the top the left in the right-hand side and say you can override that by just saying body margin zero pixels you save that. Now you can see that our links are moved up against that so that's all we need for our body.
Now, let's grab that nav bar and for now let's just add a background color to it. I'm going to go at the dark blue color of #425068 hit save then it's going to give us that nice little dark bluish color there for the nav bar.
Now we're not done with that nav bar class but when I'm going to do is all of the other styles that I'm going to add I'm going to add inside of a media query. The whole point of this exercise is building out a responsive nav bar component so I'm going to keep our base styles pretty basic and then anything that is specifically targeted to having the responsive element thats going to go inside of a media query.
Show notes and code:
https://www.edutechional.com/2018/08/...
Follow me:
Twitter: / jordanhudgens
Instagram: / jordanhudgens
GitHub: http://github.com/jordanhudgens
