Flexbox- Aligning Elements in Web Design

When we want to create layouts where things are next to each other, we need to learn some techniques, and there are different ways you can put things next to each other. One of them is using something called Flexbox. We've learned about the display property previously.

We saw there's display block, display inline, display inline block, and now we're going to learn about a new display property called Flex, or Flexbox, as we call it in general. And Flexbox allows us to lay things out in a row or a column, and we're going to introduce it just so you can start to see how this works. There's a lot to learn about Flexbox.

This won't go over everything, but it will get us started with the idea. We've got a new folder of content here where I've got some new social media icons, which I've added to this, and put them into the nav bar down below here. We put a div with a class of social, and these are links out to, you know, Facebook, and X, and Instagram, and so forth, and inside those links are our images with ALT text for Facebook, X, and Instagram.

Let's just see how this looks in the page. So I'm going to preview it in my browser, and looking down here, we've got some logos. We're going to want those logos to be on the right, and we're going to want them to be vertically centered with the copyright on the left.

So I'm going to want them on the right, much like I'm going to want some navigation on the right over here. So I want to add the nav links up here, and put them on the right just like this. We're going to do this twice.

We're going to see Flexbox doing the same kind of layout to two different things. First, we need the nav, because we don't have the nav bar right now. We do have in our header, we have our current image, and below that image, in that same header, in that same bar going across the top, I'm going to insert some nav, and we're using the nav tag because it's appropriate to use in your main site navigation.

In there, I'm going to create a list with several list items, and we're going to be putting a link inside of these, and the first link is going to say about us, and it's going to go to our about page. Now, I don't actually have an about page yet, but eventually I will create something called about.html, so I'll just create that link, even though if I try to click it, it won't go there yet. Eventually, if I create an about page, it will exist.

I'm just going to actually copy and paste this whole line. I just clicked anywhere in the line and hit copy and paste, and then I can change this. So this is going to be, we're going to have a sign up page, and this will be signup.html. All right, save it, preview it.

I'm going to do option B or ALT B on Windows, and here in this top bar, I've now got this list of links. I'm not going to bother clicking them because they don't go anywhere yet, but they do look like links, so we'll be able to style them appropriately. And it is correctly marked up as a list because it is a list of the links in our nav, but I don't want it to look like this kind of list, so I do want to style that like we've seen before.

So this will be a good review going into our CSS here. I don't have any nav rules because I've just added the nav. So down below the header here, I'm going to say for the list that's in the nav, I'm going to say that the list style type is none.

That gets rid of the bullets. Step one, get rid of the bullets. Step two is get rid of the margins and padding.

Just as a reminder, if I inspect this list, and I'm going to put the DevTools over here on the right, this list has margin and padding. So it has both, the looking over here, the orange and the green, margin and padding. So I want to zero both of them out.

So I'm going to say margin zero and padding zero. Okay, whether you have spaces or not, that's personal preference. You don't need to have the space.

It's okay to have the space. Either way works. CSS does not care.

All right, getting a little closer. Now these line items here are next. They're on top of each other and I want them to be next to each other.

So I want them to be side by side. So those list items, nav.li, I can set to display. Now you could, as we saw in a previous exercise, just always say I'm going to always use display inline block because if I'm doing box model stuff like width and height and padding and margin, then I do want to use inline block because we saw issues like, for example, with padding.

We saw weird issues when we did padding. Technically, we're not doing padding here. We don't have to use inline block, although it wouldn't hurt if we did.

We will be able to still do margin and that would actually work okay. I care if I do, I'm going to do a lot of margin here on the left because eventually we're going to align this all the way to the right hand side. So I'm going to put margin left to put space between these.

The reason I'm putting it on the left is because when this stuff gets right aligned, I don't want there to be right margin. I just want the padding of the header because the header already has this 20 pixels of padding. So it's already got the space.

I don't want the signup to have space to the right of it. I want space to the left of it. So that's why I'm doing left margin to put that space between them.

Margins do work okay. It was the padding that we saw weird things with. So while I don't need display inline block, I could just get away with just display inline.

I wouldn't blame me if you just want to kind of make the standard rule like I'm always going to use inline block. Technically we can save a little bit of code just by saying display inline. It was really padding that had the issue before.

So since I don't have to use display inline block, I'm just going to save a little bit of code and just use display inline. All right. Now styling those links.

I want to style the links in the nav. So nav a, I'm going to give it a color here, which is going to be a gray. I don't want the underline.

So I'm going to say text decoration none. We're going to set a font size here to 17 pixels, and I want them to be all uppercase. So text transform uppercase.

All right. So starting to look a little bit better there. All right.

And that's actually a little bit too much space. I'm going to lower down that margin to a more reasonable space. I just wanted you to really see kind of where that space was.

We just don't need, we don't need quite that much space. All right. So as a whole the nav is ready, but it's not in position.

The nav is a block element. Notice it even has display block in the user agent style sheet. The style sheet that's built into the browser that provides all of that default styling.

I've not styled the nav. We're just seeing the built-in default styling from the user agent style sheet. It's display block by default.

If we don't want it to be, we can change it, of course. But what I'm going to do here is I've got this image, which is display inline, which could be next to something. But because the nav is display block, it goes down to the next line.

Nothing could be next to it. So that's why we get the stacking here. I want a completely different way of displaying things, because with display flex it's going to open up other properties where we can do things like alignments and spacing, and it's a flexible way of aligning things in a row or column orientation.

So the header is containing the things that I want to put next to each other. And the idea of display flex is that display flex by itself is not the end of things. It just unlocks a new family of options.

Other properties that wouldn't work if we didn't say display flex. So sometimes CSS properties are connected to each other that a property might not work unless there's another property enabling it. And that's what's going to happen with display flex.

So the parent element that has the children. So this is a parent-child relationship here that we're talking about. Header is the parent and it contains two children, the logo and the nav.

I want this parent to tell its children to get in line, like literally just get next to each other, get in the line. And that's what display flex is going to do. I'm going to set it on the header, which is the parent element.

And so I'm going to go up to here to my header rule, and I'm going to say display flex. So that will tell its children to be next to each other. Now notice how those two children items go next to each other.

The default direction is a row, although you could make it a column if you wanted to, but I actually want it to be a row, so this is appropriate. Notice how flex is marked there because it says, I want you to know that those items are being controlled by this flex parent and that's why they're next to each other. The default alignment here is that these things, notice the height of the nav, and I'm going to zoom in on this a little bit more here so you can see this better.

This one I'll zoom out. Notice the height of this nav is now matching the height of the image. So the height of this is kind of being stretched to be the same height as this.

But I don't want this kind of default stretch option. I want a vertical alignment here and the idea is that with display flex, there are ways that I can say how those children should be aligned. So I can go down here and I can say let me align the items to the center and notice how that works.

When you set the parent to display flex, you get to control those children saying, okay, I want them to be next to each other. I want them to vertically align in a certain way and I do want those to be vertically aligned center. I like that.

But then also one of the things that's flexible about display flex is also the spacing between those elements and there are different ways we can space these out. But when we think about adding margin space, we think about adding space outside of an element. So this logo, I could put margin to the right of this or margin to the left of this.

And when I do that, if I went and I said margin left and if I put in a pixel amount, so like let's say 500 pixels. Well, actually that's too much here. It goes off screen.

If I say, you know 50 pixels or whatever, that's a fixed pixel amount here. But I don't know exactly how much that would be because it would need to be flexible, right? So what is a flexible amount? An auto amount. So auto means just make all of that space automatic and that's the beauty of doing display flex is it'll be flexible about that space.

So I can do margin left auto. I could also again, I could do right margin on the logo if I wanted to or left margin. It doesn't really matter which side I do it on.

I'll do it on the nav just because I already have this done here. So I'll go back here. And do I have a rule for nav? I don't have a rule just for the nav.

I also don't have one for logo. So it doesn't really matter which one I do it on. So I'll just say nav margin left auto.

And now, oh and I forgot to do the, I had done that here in the browser. I had not done align items. So align items center.

Got to do that in the code. Always have to remember that if you're doing things in the dev tools, those things don't get saved originally to VS code. You got to always make sure you do those.

So so now we've got our vertical alignments. We've got our spacing and now across all of our screen sizes here. We've got the logo on the left and the nav on the right, which is the way that I want it.

So let's do this again down here for the social media links. So a couple things here, zoom in closer here. There's some weird underlines there and the underlines there, they're actually colored.

I don't know if you can quite tell that, but actually when I pressed on it there, the quick press did change the color. And that's because that's the link underline. Links are underlined by default, but I don't want those to be underlined by default.

So I'm going to say that in the social div, that if there's any link, I don't want there to be an underline on that. So I'm going to go into my CSS. Don't have any social stuff.

So any link that's in the social div there should be text decoration none. And that will get rid of the weird little underlines there, which are from the underlines like a text link underline. And I want there to be more space as well.

So I'm going to put margin left again. I'm going to do margin left because once I align this over here to the right, the footer already has its padding. If I go to the footer, it already has its padding all the way around.

So I don't want space to the right of that. In addition, I want it to be spaced to the left. So I will do margin left, just do a little bit like 10 pixels.

Space them out just a little bit more. Also, they're a little bit dark. They're kind of black and I'd like to make them fade into the background just a little bit.

So I'm going to add some opacity to make them slightly transparent. Zero would mean invisible. One would be fully visible like they are right now.

So I'm going to go somewhere in between. I could say 0.6 or simply just 0.6. Same thing. That's going to be like a 60 percent transparency.

Just kind of fades it so it blends that black into the background. So it takes on some of that background color just so they don't stand out quite so much. All right.

So I have the same kind of situation here that I had in the header in this wrapper here in the footer wrapper. I have two children, the paragraph that I want to be on the left and the social div on the right. So because I want these two things next to each other, I can tell the footers wrapper.

So this is the parent, right? Because I'm not doing this on the footer because it only has one child, the whole wrapper. I need to be doing this on the wrapper because it is the thing that has the two children. So the footer wrapper is going to get display flex.

So footer wrapper gets display flex. And that tells its children to go next to each other, which they do. Notice this is now flex.

OK, so its children go next to each other. They're not vertically aligned to each other, vertically centered to each other. So I'm going to say tell those children to align those items center.

And now they're vertically centered to each other. Good. I like that.

Now, I need to either put space to the right of the paragraph with margin right or space to the left of the social with margin left. I already have to add something for social. No, I don't have anything for social.

The footer paragraph. I do have a rule for footer paragraph. So since I already have a rule for that, I could say margin right auto for that.

So I'll do that. I'll say margin right auto for that, just so you can see. Again, it doesn't really matter whether I say margin right auto for the paragraph.

Or I could go to the social div and say margin left auto. Either one is going to work. The idea is I'm just saying add space in between.

By the way, if you had three or four different elements when you put this auto margin, you can decide where you want to put it. And if you put on multiple elements, it'll evenly distribute that available space between all the places where you say auto. Kind of like when we had up here, when we said margin left auto and margin right auto, it evenly distributed the space between those two things.

The same thing is essentially happening here, too. Now I zoom back out. Now we have this copyright on the left, social on the right.

It is flexible. So that's always on the left. That's always on the right.

Just like we have up here. So that's kind of a common layout thing where we want something on the left, something on the right. And one of the ways we can do that is with display flex.

There's a whole lot more you can do with display flex, but this just starts to introduce some of the features and you can try these out yourself in exercise 6a.