21. Using flexbox to start styling our navigation - Responsive CSS Tutorial

Key Takeaways

bullet points we've got everything set up but it doesn't look so nice right now so let's go and take a look at how we can do it there is something new that we need to look at is how do we even get rid of those bullet points which is kind of interesting so for this one I'm gonna leave this on the side here so we can at least see the changes that I'm making happen live we're gonna jump over to my Styles now for now we have all these fancy designs and the colors and everything I'm not gonna worry about those for now because I really want you to be focused just on how flexbox works in doing the overall styling and setting of this up I don't want to distract with other CSS but we will be building out this whole thing for an actual website so we will be getting into all of the different styles that we need to do for this eventually because I'm not worrying about it I'm not gonna be terribly concerned with how I'm organizing my CSS so let's start with my nav and I don't have a lot to do on that now you'll notice here that I have my nav and a ul Li and I have my a and we need to style all of these there's stuff that we need to do on all of them but what I what you will see some people do is you will see people give classes to this and I actually do this on a regular basis where you'll have a nav list and then this would be a all three of these would be a class of nav list item or a nav Li and then my links themselves could have a class on them of nav link or something like that and I have done many projects like this I think it makes a lot of sense it does make your CSS a little bit more organized or maybe not more organized but a little bit easier to read so if you'd prefer to take that approach by all means go for it for now though I do want to show that it is not the end of the world to use compound selectors and this is a really common time to use it where I'll take my nav UL we're gonna have some styles on that I'm gonna have my nav Li I'm gonna have some styles on that I'm gonna have my nav a and have some styles on that and of course my nav a:hover and have some stuff on there as well now what I will not do is have my nav ul Li and you will see tutorials online that do this and then here it would be my nav ul Li a in the old days it was a performance issue the more complicated your selectors the browser would take longer to read that selector because it would have to read oh I got all my links oh but now I have to find the ones only in list items that are only in my unordered lists that are only in my nav and would actually slow the rendering of your CSS down a little bit but browsers have gotten really really good and really really fast at reading CSS so it's less of a performance issue it does hit on specificity a little bit in that this is becoming more specific for nothing and it just makes it complicated to read and takes a bit more of a cognitive load when you're looking at it you got to think for half a second when you don't really want to be thinking whereas if I just leave it like this it keeps it nice and simple so personally I like to keep it like that and most people were advocate if you are going to have compound selectors which are already sort of frowned upon keep them really really simple when you do use them before I jump in I'm gonna fast forward I'm actually about a boarder on all of these just so we can really easily visualize what's actually happening all right so there we go we can see all of my elements I didn't put one on the hover because I don't think we need it but we can see my UL my li and my a so the big pink box is the UL the dotted orange box is my li and then these green boxes there are the links themselves which are the a and we can see that the UL and the Li are block level elements because even though the text is really short those are stretching the full size of what's happening but you will notice that my lis are starting here and there's this big empty space next to it that's because of the way the UL is set up to give us room for those dots so the first thing I'm going to do is turn off those dots and there is a list style that we haven't really looked at I almost can put list style to none which will make those dots disappear I just can't forget my semicolon there there we go and now my list style of none it turns off the dots there are other list styles that you can go through but for now we're just gonna switch them off because we don't need them now if we think about this I have this ul which is the big pink box and then inside of there I have these three orange dotted boxes and those are my allies these are block level elements how can we make lock level elements that are one on top of each other switch and be one next to each other instead I hope you said display flex so I can come on this ul and I can use the display flex and all of a sudden they shrink down to the content that's inside of them so these dotted orange boxes are now the same size as my green one we can barely see those orange dots anymore because there's a little bit of overlap going on and they've gone next to one another so that's fantastic and really good now with display flex we've seen that we can a justified content and do a space either around or between or evenly so I'm gonna do that really fast and you can see it's space things out but we have this weird empty space left here on the side still all of our paragraphs and our headings have a default margin top and bottom because we not original issed normally has bullets or numbers on the side they have that default margin top and bottom but they also have a default padding so it's really common to say padding:0 that's going to get rid of that extra space on the left side so you can control things properly now the problem with using space between like this is it spreads things out as far as we can get them to go so depending on the size of the window this could actually cause some problems or you could come in and give this a width of 350 pixels and now I'm starting to get the spacing that I want and it looks nice but now what happens if I add a fourth item or a fifth item and well your page when you first are creating it might only have three pages later on you might create more whether it's a personal site for you or a client site then this number has to be changed or you have to change a media query or it's a nightmare so instead of doing that I'm gonna remove the width from here and I'm gonna remove my justified content and what I'm gonna do is go in the list items themselves and I'm gonna add a little bit of margin to push them away from each other so I'm here I'm gonna do a margin of zero for the top and the bottom and one em for the left and the right the reason I'm doing left and the right is because eventually this will be a centered layout and I want the equal space on the left and the right if it was a left aligned or right align text we'd have to look at it differently and we're going to see that in a little bit but for a center to line one I want that margin on the left and on the right now I do have the problem that they're not centered and one thing people often will try is to do a text-align:center and it doesn't work the reason this doesn't work is because text-align:center will Center text within its parent so if we look at this living social life that's in my header so if I come to my header and I do a text-align:center it's centering all right actually it's inside the h1 so it's centering in that h1 which is full width and this paragraph it's this text here is centering within that paragraph which is full width the problem here is home is centered but it's centered within its and the Li is super small so it's it's super small because of our display flex here so I can't use a text-align:center on these to actually move them to the middle and I won't lie I have been holding out on you we can use justify content for this so the same way we saw with align items we have a flex end a flex start and a center we actually have the same thing here I can do flex end and push things all the way to the end or a flex start and keep things all the way this is the default and it keeps things just starting from the left side or I can do a center and it will Center it exactly on the page so with that done if I come through and I remove all these annoying borders because we don't really need them right now so I'm gonna leave this one here if you want to try and put additional styles or finish styling it go for that if you just want to play around with the positioning and play around flex and the different things you can do with it by all means jump ahead and have some fun with it and then in the next videos after that we're gonna look at how we can modify it a little bit and then start making