CSS Flexbox Tutorial #7 - Creating a Menu with Flexbox

you're something guys welcome to your seventh flexbox tutorial and in this video we're going to go through our first example and create a flex menu Wow dogs I've got a head and opened up this example one folder and I'm going to be working in this menu dot HTML file which you can see right here and also this style dot CSS file which is linked up in the head here so in this menu HTML file you can find a div with a class of wrapper keeping everything within this central column there we've got some pretty standard markup a nav elements ul and then some allies within it containing a tags so that's pretty standard when it comes to creating a menu in HTML so what we're going to do is jump to the Stars and we're going to star this up using flexbox and some other kind of base styles so I've split this into two first of all I've got those Styles right there which is just sterling the body in the wrapper etc then I've got a comment right here saying menu based ounce this is where we're going to do things like the color the font weight the padding that kind of thing and then down here we're going to apply those flex styles so that they align properly all right there so let's start off by grabbing the nav element so I'll say nav open this up and what I'll say is background 333 I'm just going to zoom in one more because it looks a little small okay then I'll go after the UL within the nav so I say nav ul and what I'm going to do is give these a list style type or not and that's going to get rid of those little blobs that you saw to the left of them I'm also going to get rid of the padding on those okay then I want to style the links themselves so I'll say nav a and then the first thing we want to do is take away the underlining of them so I'll say text decoration is not then I'll say text align is going to be Center and this will kind of come into effect later in fact I'll leave that one off for now I'll just comment it out then I want to say they're all going to be white so call it FFF and I'm going to display them and a block so then I'll take up the full width by default and I'm going to give them a padding as well of 10 pixels like that okay now I want to do a quick hover effect on the e so I'll say now a pseudo hover and all I'm going to do is change the background color to five five five which is a slightly lighter gray so there's our menu to begin with and this is typically how it would probably log on more battles something similar to that and maybe we could include a drop-down menu I'm not going to do that now but the point is on mobiles it's always going to revert to some kind of stepped design all right now what we want to do is make the Flex menu for slightly larger screens so what I'm going to do is a media query first of all I'm going to say media screen and oops the minimum width is going to be 768 pixels so only when the browser is larger there's 768 pixels are these Flex properties going to come into play for all browsers less in size then it's going to look like this static version and we'd apply like I say some kind of drop down menu to it alright then so let's open up this media query and ourselves a bit of room all right there so the first thing I want to do is grab the UL tag because that is going to be our Flex container remember these right here are going to be Flex items and for those to be Flex items we need to make this a Flex container so let's get that ul so I'll say enough ul and we're going to give that a display type both flex like that and then look what happens they all now line up to each other left to right pretty cool right so we can either keep it like that or we can apply some kind of flex grog to it so let's just try that I'll say now if Li these are the Flex elements within it remember and we'll say Flex is one one and zero so now they're growing to all the available space and they're taking up the whole navigation and if we had more links then they would too so if I just kind of copy one of these and paste it in again you're going to see that they're all going to be the same size they're all growing at the same rate to take up the available space pretty cool right so that has been done just using these couple of flex properties right there how simple is that now I would previously kind of do floats clear those floats and mess around a little bit to get this to look how I wanted it to this is so much easier and before when I said text align and a commented out I wanted that to have an effect right now because that looks a little bit nicer so I want to show you one more thing and to do that I'm going to comment out this flex for now and I want to show you a property which we can apply to the Flex container which is the UL and that property is called justify - content all right and there's a few different properties we can use for this so the first one is Center so let's try that see what it does and it's going to Center all of those flex items in the container all right dead simple and the next one is flex and and that's going to move them to the opposite side and notice it doesn't change the order if we used to use floats because home was the first in the list Homewood offered flow over to the far right and then kind of go backwards this way using this property right here justified content and specifying flex and it doesn't do that it keeps them all in the same order so that's really cool the other one I want to show you is the Flex start and that is kind of the default behavior weather all on the left over there and then finally I want to show you these two here space around and space between so to demonstrate that I'm going to give these a tags a different background color I'm going to say background color will be about 777 so it's quite light so we can see them now all right so now just your five content I'm going to say space around and check that out it spaces them around equally and it adds a little bit of space on this side so we've got space here space on the edge and then we've got space doubled up between them as well all right so on each side of each element there's space that's what space around does and it spaces them equally the other one I want to show you is space between and that just gets rid of the ones on the edges so now there's equal space in between them all there all right what I'm going to do is just keep this at flex start because that's how I want my navigation I'm going to take that background color off them as well because I don't want that for now and to be honest I'm not sure I'll keep this flexing let's have a look yeah we'll keep that flexing for now that was pretty cool all right so that guys is how we make a simple navigation menu using flex and these are the only flex properties we've used how simple is that so if you have any questions feel free to leave a comment down below otherwise guys don't forget to share subscribe and like and I'll see you in a very next tutorial

Channel: The Net Ninja

Views: 120,056

Keywords: css flexbox practical examples, css flex property, css flexbox layout, flexbox tutorial, flexbox css, flexbox layout, flexbox tutorials, css flexbox tutorials, css flexbox, css flexbox tutorial, flexbox menu, flexbox example, flexbox navigation, flexbox vs float, flexbox flex property, flex property, flexbox flex, css flex, flex menu, css flex menu, css menu, css navigation

Id: 2plKBskaKfY

Length: 8min 3sec (483 seconds)

Published: Fri Mar 18 2016