Flexbox Margin Trick

[00:00:00]
>> Kevin Powell: So we've seen a bunch of stuff with flexbox. Seems really useful, some of it can seem a little bit weird, but one question I always get is about justify items, and I mentioned that that doesn't exist in flexbox. There is a way though that we can sort of simulate a behavior of the justify-self, and I really feel like it's worth exploring. It's a bit of, not too often you'll use it, but you'll be really happy that you know that it's possible.

[00:00:26]
Again, you might forget how to do it, it's completely fine. Just knowing it's possible is usually the most important thing when it comes to CSS. So here we have navigation, we've already seen how to do this display flex on the header, justify-content space between, putting the space in the middle. If I didn't have that, the space is all there. We have the empty space over here. Now, I'm going to turn on some visualizations just so we can see the flex items that are in here.

[00:00:55]
Whoop. Comments in Code Pen sometimes are a bit fun to turn on and off. As we can see, I'm going to do this the manual way. There we go. So I just want to visualize the different flex items that we have so we can see where the spaces are being distributed and understand what's actually going on with this. So the flex item here inside the header and the other one is the black one over here, which is the nav.

[00:01:17]
And then inside the navigation, we have our nav list where I also have a display flex that's putting these items next to one another. And it's this really common pattern where people want like the login and sign up all the way on the right side, and you want to have these links over here centered instead. Right now I have them all as part of one list, and with flexbox this feels like, oh I can't manipulate this because we don't have that justify-self or a way to push individual items around.

[00:01:46]
This is where the trick comes in. The important thing to be able to get this to work though, is right now, this parent that they're all living in is small. It's matching the size of the content in here because they're both flex items. So the very first thing we have to do is go back to what we were just learning about, which is flex-grow. And I want that to be on my nav list here. So my nav list is the black one that we see.

[00:02:13]
So I can come here, flex-grow of one, so it fills up all of the space that was over here. I put that on the wrong item, I apologize, and I spelled it wrong too. Maybe it's that. We'll see in a second. It was the wrong item. It's not the nav list, the nav list is inside the black one. The one I wanted was the actual nav. Let's just go look really quickly. I was thinking, look at it like this, and putting, by the way, putting outlines or borders on things when you're not sure what's happening, really good idea to visualize what's actually happening.

[00:02:43]
So here's the div and the nav. The nav is matching the size, it's tiny over here. I want the nav to be bigger, so I can spread those elements out inside of that. So I don't have a selector for that, I'll do it right here. Got nav, flex-grow of one. And now that whole black area has expanded, and if I wanted to, I could move those elements around in there we saw before, we can do or justify items of, let's say space between.

[00:03:14]
I'm not going to use that here, but just to show you, we could come in because now we actually have space to do that. So now that the nav list has area to live in, we can actually spread elements out around in there as well. So let's go and take a look. We have the nav and then inside the nav we have our nav list right here. So let's go visualize the nav list as well. We'll put a border on that border.

[00:03:39]
I'll do five pixels dashed green. I like giving different dashes and colors and everything just so we can see them. Now we can see we have that extra empty space available that wasn't there before, so that means this is also flex, and this happens a lot where you have these nested flex boxes that are going on to create our layouts. So I could do something like justify items space between and spread those out within that area, uh, justified content.

[00:04:07]
You're going to mix these things up. I do it all the time. There we go. This is super normal. I've been writing CSS for, I've been teaching CSS for ten years and I still mix them up, so don't feel bad if you're mixing them up as well, please. So we've spread them out, but again, I don't want to spread them out like that. I only want the login and sign up over here. So this is where this trick comes in.

[00:04:27]
You will have to select the element that you want to push around. But let's say I want this login to get pushed all the way over to the right side. I have already added a class here just to make it easy to select. So on that login that I have, I can do something kind of weird where I do a margin-left of auto. And it's adding a margin to the left side of it, and the auto, we've seen it before the center just with block level elements, it just means add the space.

[00:04:57]
We were doing it on the left and the right, so we just add the space equally on both sides. It's now just adding all of the space to the left. Let's turn off our visualizations. It looks a little bit weird having them on. I'll turn that off and I'll turn this off. Just really quickly, I'm commenting these on and off, if you've never seen this before, you can do this in most editors, just with the Control and the forward slash, and then toggling it on and off with that selection.

[00:05:27]
If you're on a Mac it'd be Command forward slash. And we have one more, which is the green one that we also want to turn off right there. So we've spaced them out. The only problem now is these are stuck over here. Be nice if they were centered, and then you start trying to play around, trying to manage things. Auto margins are kind of weird, we can distribute an auto margin across different elements.

[00:05:49]
And so I can come now on this first one, the home, I could add a class to that, maybe we should do that just for consistency. Yeah, we'll say class. I'm not going to call it home though. We can call it something like, oops, sorry. We can call it something, first link or first list item or something like that, just because maybe it's not home, it changes to a different link, you want it to just be the first element, or alternatively, we could use the first, um, the first child selector as well that we saw in a previous lesson.

[00:06:24]
Let's just say we do first link. And on that one we could also come and say margin-left of auto, and it's going to add auto margin to the left of that. There's an auto margin over here. Auto margins are just about distributing space automatically, which just means equally, and all of a sudden we end up with a very common layout without having to destructure the navigation or do something weird with it, and it works pretty well.

[00:06:46]
Right now it won't be responsive because I haven't put flex wraps, that can start complicating things a little bit, but it shouldn't cause any major issues along the way. Last thing I will say is I have been using the physical sides. I did say we want to do, I did, I use left just to make it a little bit more straightforward, but that would be my inline-start on both of those. You can also get away with, or not get away with, but you can also use the margin-right as well to do the same thing, to push things the other way.

[00:07:13]
So, I could have used a margin, actually in this case, I think this would work, but if you have a different type of layout that you're trying to achieve, again, you can put the margins on different elements, and they're going to play together as long as they're siblings with one another. Yes. Is there any advantage or disadvantage to separating the login and sign up links into separate divs or other separate list to group them differently to achieve this?

[00:07:40]
Simplicity. One of the problems, I think the main issue with this is if you did this and you're working in a team, and you do this as like a pull request, someone might be like, not sure about that, just because it's a little bit confusing if somebody were to just come across it. The main benefit for me is just having, like, if I, if these are all links, it sort of makes sense to have them all as part of my navigation.

[00:08:01]
If these, the login and the sign up are buttons, which they often are, to open a modal or something like that, then they're probably not part of the navigation, so then you could have them as a separate piece and it simplifies your life a little bit. So there are a few different ways, it depends. For me it depends on what type of elements they are, and then does that make sense to separate it or not.