Alignment, Justification, & Axis

[00:00:00]
>> Kevin Powell: Now, alignment and justification and axes, uh, I didn't realize for a long time that the plural of axis is axes, but we're talking about like cross and across and up and down. We had our main axis and our cross axis before our inline and block axis, plural is axes. So with grid, we had justify-items, align-items, and then justify-content, align-content to deal with how the items were being arranged within the grid.

[00:00:26]
Most of those properties we also have in flexbox, but it gets really weird kind of fast. Uh, once again, don't try to memorize these. There's a few that you'll use a lot. They're a little bit different from the ones you tend to use with grid, but once you're used to how they work in general, it just starts becoming a little bit more normal. The reason that things get a little bit complicated is because with flexbox we have two axes.

[00:00:53]
We have a main axis and a cross axis. We have to pay attention to these. Before we worry about what I mean by that though, let's look at a simple example, and then we'll get complicated. So when we did display grid or display flex before, we got this, every item got as small as it could possibly get, and they all went next to one another. And right now what I've actually done is on one of them, the first one, I've given it a block size or a height of 70 pixels, just so it's taller than the others.

[00:01:18]
Let's make this even bigger. Uh, 300. So one of them is big, the other ones are stretching. This is the same as grid before. The row size would determine the height of the other elements, because the row, the whole row would stretch, exact same behavior. So if I go on my flex container and I want to go up and down. Uh, we had before, or first of all, does anyone remember when we're dealing up and down, which one would we be using in grid?

[00:01:52]
Yeah. Uh, align, align. And do I want to align my items or do I want to align my content? Try one and see what happens. Yeah, that's honestly, that's use one and if one doesn't work, use the other is a good one. I will say it is align-items, uh, and they will go center. So this works exactly the same way that it would have worked in grid. The items are going to the center of the vertical axis right there.

[00:02:23]
It also changed their size. Uh, so I only, sorry, that probably not clear because I only put one of them has a height on it. Instead of that, what I could do, let's do this instead. Uh, we'll come in with some more text because that's more clear. So if I have text in here, it's causing it to be bigger. The reason I didn't do that is because it changed the size of them here. Um, but we can leave, we'll leave it like that just for one second as I do the align-items.

[00:02:54]
So here, they're stretching to match the height as a default, so they want to be as big as the tallest sibling. So if I do an align-items of center, they're not looking at the height of the sibling anymore, they're centering themselves within the space. But yeah, the reason I didn't put the big content is because it impacted the layout the other way. So let's put that back on where the first one has a height of 300, just so they can be aligned this way.

[00:03:23]
Now one of the big differences with flexbox and grid is with grid most of the time, grid-template-columns using 1fr, so our columns were taking up all of the available space. So it meant that justify-content, we had to make our grid smaller to be able to justify the content left and right. With flexbox, it's very often that we have empty space floating around because every element shrinks to be as small as it can possibly get.

[00:03:47]
As long as there's empty space that is available, we can then just come in and use justify-content and say we want to center it. And it will center left or right, or we can use the ones we were looking at before, space-between, probably the one that you'll use the most often, equally distributes all the elements that way. We also have space-around. And we distribute the space around. The space-around is a really weird one.

[00:04:13]
The same thing happened in grid, but I didn't really mention it, where the space here looks smaller than the space here. Uh, we do have a flexbox inspector as well, the same way you get a little flex thing here, so you can actually like see the space is bigger between the elements than on the outside. This was the first one they gave us with space-around, and what it's doing is it's putting an equal amount of space around each element.

[00:04:38]
So this has, say it's 50 pixels, 50, but then this one has 50 here as well, so it doesn't actually make them equally spaced. So once people complained enough, they added space-evenly, which actually evenly spaces them out. Um, you probably won't use around too often. It's probably evenly. Most of the time you're using this, it is space-between. With grid, I mentioned most of the time, you're going to be using justify-items or align-items.

[00:05:08]
Occasionally the content ones will come up. With flexbox, most of the time these are the two that you'll be using, almost exclusively. We do have an align-content. This does exist, but align-content only works if you're using a flex-wrap and your items are wrapping. And that makes sense. It doesn't when you first say it, but if you have a lot of content. So we added a ton of content. I say flex-wrap of wrap.

[00:05:48]
So our content is now wrapping. Let's also turn off this align-items of center. And in a sense, actually, it's similar to grid. If I say right now align-content of center, content would be center up and down. They don't really have a space to center in right now, so I'm going to take off that height that I put here because that's causing some issues. And I have to go back onto the flex container and once again give this a block size to make it bigger of, say, I don't know, 800 pixels, just so we have some space to move around in.

[00:06:20]
And by default, align-content is nothing, so they're just going to stretch to match the height of the overall parent. This is very similar to how grid worked. The item, the rows will evenly distribute to match the height of the parent, and I can say align-content center. The only time we can use align-content center is if we're wrapping, because if we're not wrapping, we only have a single row of content.

[00:06:44]
So if I turn off the wrap, it's going to break some things. But you can see it's actually stretching now to fit the entire height, because we're dealing with one row of content, which means you'd want to use your align-items. See how things get kind of weird with flexbox very quickly, and now they've actually centered within that space. Most of the time you're not going to want to do that anyway, so you're not stressing about it.

[00:07:06]
I just want to mention all of that. Display flex, align-items center is probably the one you use the most often, and a justify-content space-between is probably the one you use the most often. Lastly, we have justify-items. This does not exist in flexbox. You can't use it. Anyone want to guess why we can't use justify-items? I'm going to reduce the amount of content we have up here to explain this.

[00:07:40]
Because it's already flexing across the line by default. Yeah, so in grid, uh, let's just turn this off for a second. When we're using display grid, and I'm going to turn my head off as well. Uh, we have like an entire grid and the items are being justified within their cells, it justifies left or right, sorry. So if we're justifying something within its cell, the cell is bigger than the item and we can move it around in there.

[00:08:10]
In flexbox on this axis, the cell is defined by the size of the element. So if I have more content in here, it gets bigger or smaller. But it's defining its own size on the justify axis. So we can't justify the items because they have nowhere to go, they're already the size of their cell that they're living in. So in the flexbox world, justify-items doesn't actually make any sense. It's one of those things that can be a little bit frustrating at times because you feel like something should be able to be justified to the end, like it justifies self, feels like it should work and it just doesn't.

[00:08:44]
Um, but yeah, so we only have the three of them. Don't stress about them too much. It is, I'm just going to reiterate again, justify-content, space-between is your friend. Those are the ones that you use the most often. I wish that was the end of alignment and justification with flexbox. But sadly, we have to talk about the axes again. We'll come back to that demo in a second, but we have to talk about these axes.

[00:09:12]
So with flexbox, we have this concept of a main axis and a cross axis, and the main axis is by default running from one side to the other on the horizontal, and the cross axis is going up and down. This is when we have something called the flex-direction of row. This is declared on the parent. So the parent is a row, which means all the children are columns within that row. I can switch that to a flex-direction of column, we'll do it in the code in a second.

[00:09:37]
I'm just going to turn off my checkbox for demo purposes. And what that does is it switches the main axis, so the main axis is now up and down, and that means all the content is now stacking, because the content always flows along the main axis. In this situation, this would be a flex-direction of column, so we're going to, let's go write that in here, flex-direction. Uh, flex-direction. Again, this is always on the parent or the flex container of column.

[00:10:09]
That you would use to flip the flex-direction so that it's going this way. The reason this is kind of confusing, not only are we changing the flow, we now have a column and all of our items are becoming rows within that column. But we've also changed the way they justify items and align-content work, I said that backwards, it's the way we've switched the way that the, well, the justify and alignment properties have now switched as well because justify-items doesn't work horizontally, justify-items works along the main axis and align-items and align-content, they work along the cross axis.

[00:10:46]
So when we flip the flex-direction, we're flipping the directions they work. This is probably one of the biggest pain points. The easiest thing to do when you're not sure is declare one of them. If it's not the one you want, you put the other one. But let's go back to the default, so we can put row here. Make sure that we're matching here as well, so we have the main axis going this way, the default behavior in flexbox.

[00:11:16]
And maybe we're going to do an align-items or start. So they're going to push up along the, oh, this is a CodePen thing. Align-items start is completely valid, but in the old days we had, before grid was invented, we had to use a flex-start and CodePen throws an error unless you use flex-start. So sorry about that. So we've aligned them on the cross axis to the start, or if I did end, they moved down to the end of the cross axis.

[00:11:45]
If I decide to change this over to column, we're switching the axes, they're now lining up again, the cross axis is switched, so the alignment to the start has changed how they're behaving. The same with the justify-content, let's flip them back, we'll do that and make this row again. And let's reduce how many elements we have just so we have some extra space that we can work with. And here, if I wanted to distribute the space that's between those, I could come in with a justify-content of space-between, like I mentioned before.

[00:12:28]
And they spread out. If I decide to change the row to a column, that means we're switching this, they flip directions, that's not really doing anything anymore, because this is the main axis, the main axis is being determined by the height of the elements, there's no space for them to be justified in. It's all kind of weird. Uh, in a sense, it takes a little bit of playing around with this. I wish there was a shortcut that I could give you to say like, this is the mental model to have.

[00:12:53]
The main thing to try and remember is the two properties you're going to use the most are justify-content, align-items. You're able to change a flex-direction because sometimes you want columns that get flipped into a row and vice versa, and that things will change when that happens, so you might just have to play around with the value of these two. If there was a shortcut or if anybody knows one, DM me and let me know what it is, it just takes a little bit of practice and getting used to, and just this concept of the main axis switching around.

[00:13:20]
It's another one of the reasons I prefer using grid and just changing, like if I go from 3 columns to 1 column, I'm just going from a regular grid to a 3-column grid, instead of flipping axes and then worrying about alignment and justification and other things, I find it much more straightforward using grid for those types of layouts and using flexbox for more intrinsic layouts that are a little bit easier to keep track of.

[00:13:34]
But there's, uh, there's some interesting things you can definitely do with this and that you'll run into as you're exploring more. So something to play around with and just experiment with until you start getting more comfortable with it.