Adding CSS flexbox to our header

- To the moment, it might feel like we're quite far away from this final design. Cause at the moment we have something that looks like this. Now, we're not actually that far away because we've settled the general brand of the site. What do we do on the last lesson is we made the brand and then we laid out so you want to the same thing in CSS now. We've got the general brand of the site.

We're gonna work on the layout. Now with CSS, there's two main layouts that we're gonna work with on this project. There's one called flex or flexbox which is kind of a flexible layout system and either one is a grid layout. Now if we look at our project right now there's two types of layout in here. So for instance, my header doesn't really align to a grid so notice that my About kind of goes in between columns.

My Portfolio goes between columns and this doesn't really end the column as well. Whereas the other things further down the page do have some kind of layout to them. So this is exactly four columns or it should be. So this is the kind of main difference between the two. So our header is gonna be a flexible layout or a flexbox layout is what it's been called in CSS, and the rest of it is gonna be part of the grid.

So, how do we work with this? So with this, what I'm gonna do is go back into my html, just quickly, cause what I want to do is layout my header in the same way as this is laid out as a header. I want my navigation on my site logo to be pushed apart from each other, across the whole of this header. So my header is a thing in here that wants this layout. But if we look at our style of CSS at the moment there's nothing in here that says change the header.

Now where would I do any changes to the header? So I could either do this at the bottom or I can kind of put it in between here or maybe here. Doesn't really matter too much. Now, I'm gonna put it between my body style and my h1 and nav style. And the reason for that is well, I kind of wanna do this in some kind of rough order so header, then h1, then a nav. Kind of personal preference.

Again don't worry about it too much. We're gonna select the header and do something to this header. What do we want to do on this header though? We wanna give this header a flexible layout to it's things inside of it. So what we're gonna do is we're gonna change it's display type to be what? Flexible. So previously it was site logo then navigation going down the page, and ask soon as we put this flexible layer on top of it, it will go into a line.

Now one thing you might notice is why is this kind of space appeared. So you notice it you select, there is a big gap at the top of this. And the reason for that is technically this is a h1. They're the same height. It's just that having some line height in here as well. So the first thing that I'm actually gonna to do is I'm gonna get rid of some of this line height.

There's two ways to do this. I can actually reduce it in here. So say line height is one point something else so I'm gonna do that first of all. What was that in my h1's so let's quickly go and find them. In my, let's select it and in my heading, this was gonna be 1.2 or 120% so this is at the moment a little bit high.

So what I'm gonna quickly add in is a line height of 1.2. We can kind of see this reduced down now. There we go. Looks a little bit better. But you might notice there is still a bit of a gap at the top of this. How come? Well again this is still part of the h2 and there's an image inside of this. I might not want this to be a h1 after all.

Maybe what I want to do instead is just remove this completely. So I'm just gonna get rid of this h1 completely. We don't need it in anymore. This is just an image and the nav. So now what we'll get is something that looks like this. Notice how this aligns to the top now. There we go. We can kind of see that looks a little bit better.

What is going on with this flex layout? How do I move this over here? Maybe kind of align in two different ways. So there's two different ways to align this. There's one across and one on up and down the page. So the moment I want to move it up and down the page, I want this to be roughly in the middle. So if I just quickly draw a line, there we go, it's not quite in the middle.

It's a little bit high up. How do I move it down on the page? So what we're gonna quickly do is go back to our style, that's CSS and with our Flex we're gonna change the alignment at this flex. So we're gonna add an alignment for the items. And this will give us a few things. It will give us flex start which is aligned to the top, the center, the bottom or even stretch them.

I'm just gonna do it a center for now. I want them all to be in the middle. It's not a big change but you notice it's kind of moved things down the page a little bit. Now there is still a gap underneath it and the reason for that is any of the centers in letters. So for instance if there's a J, it might be below. If there's a g, it could be below as well.

So for now we're just gonna leave it as is. How do you move this over here? So I wanna do the alignment in the other direction across the content itself. So what I can do is add one more style into here, which is called justify content. And this isn't going across this direction. And here, I've got the same kind of things except I've got some other ones in here. Space around and space between.

So I wanna a equalize the space between all items. So I'm gonna apply this. Oops. Pick it. And apply. There we go. Space, dash, between. And what this will do now is we'll add a gap between all the items. So the items inside here and the image and the nav.

It doesn't apply to each individual thing. It only applies to what is directly inside of it. The boxes. The boxes inside here is this and then all of this together. So the groups. So one thing to kind of think about is how this aligns. There is other things we can do with flexbox or flex. The other one that we can add in here is called flex-direction.

I'm just gonna add that above. Flex-direction. By default, this is a row that goes across the page which looks like this. I can change this alignment to be down the page by using column. So now if I change it, this is now going down the page. I could add some margin on these to kind of move them further down, if wanted to an alternative.

So for instance, if I just wanted to add an alternative, I can add it here. I can even add it on the navigation as well. So for instance, maybe I'll do it on the nav cause it's the whole box. On the navigation, I might want to add some margin. Maybe something like 32 on the top, none on the right, none on the left on the bottom, none on the left.

So now we'll have a bit of a gap between the two. So just by adding something very, very quickly, I can add lots of layout in here. What I do want to do obviously is not have the alignment in a column. I want it to be aligned in a row. And I can switch some of these things around. This looks right. Again, I'm gonna remove that navigations margin just because it off sets it a little bit now. Perfect.

So now we've got our header laid out as it should be. This was only six lines of code and this is very powerful stuff. As soon as we start to add more of this layout techniques in here, the site will come together really, really quickly.