Flexbox Centering Goal 0:00It sounds like you finally want to learn how to use Flexbox in your projects. Okay, let's get started. Step 1. What if you want to take your simple logo, we'll use the series name in this case, and all you want to do is horizontally and vertically center it on the page. Before Flexbox, it was always kind of annoying, right? Especially if you have multiple lines. But not anymore. So let's take a look at this. If I refresh in Chrome, obviously that's the default output. Enable Flex Container 0:22So let's take a look at this. If I refresh in Chrome, obviously that's the default output. Okay, I'm going to go to my style.css file, and we'll say, for the HTML and the body element, I want the height to be 100%. And that makes sense, right? If I want to vertically center a heading in the entire page, well, I need to make sure that the body and the HTML take up the entire height of the page. Next, I'm going to say body display flex. Any usage of Flexbox will require display flex. Okay, but if we come back and give this a refresh, it doesn't look overly different. Center with Align-Items 0:51Any usage of Flexbox will require display flex. Okay, but if we come back and give this a refresh, it doesn't look overly different. Let's add a new one. Align items to the center. Okay, come back, give it a refresh. And now you'll see that it aligned all of the items within the body tag, in this case, just one, to the center. But don't make the mistake of thinking align items only works vertically. Instead, as you're going to find out, it's a little tricky, but it's all dependent upon the primary axis. Center with Justify-Content 1:19Instead, as you're going to find out, it's a little tricky, but it's all dependent upon the primary axis. But for now, kind of cool. Okay, what about the next one? I want to align the horizontal axis, a different axis, to the center as well. Back to Sublime. And we can use justify content for that. And once again, I will do center. Okay, give it a refresh. And there you go.Okay, give it a refresh. And there you go. It's perfectly aligned, no matter what, in the direct center of the page, as you can see there. Pretty neat. So now we could do some fun stuff, like say the body should have a background color of the layer cast green color. And next, maybe set the font family to Sans Serif. Okay, back to Chrome. And you get the idea. Main vs Cross Axis 2:03Okay, back to Chrome. And you get the idea. You can style this however you want. But now you have a perfectly aligned logo. Okay, but it's still probably confusing what I meant by the main axis and the cross axis. What the heck does any of that mean? Okay, let's take a look. Let's move this to the side. As you'll find, with Flexbox, you have one axis and then a cross axis.Let's move this to the side. As you'll find, with Flexbox, you have one axis and then a cross axis. So in many ways, you can think of this as the x-axis and the y-axis. But the thing is, align items and justify content don't specifically refer to one or the other. That all depends upon the direction that you pick. But now by default, justify center will be horizontal. Now here's a little tip. Whenever you're playing and learning around with this, if you edit these items,Whenever you're playing and learning around with this, if you edit these items, Chrome will show you all of the various options you can choose from. So center is what we had, but if you want it all the way to the right, you can use flex end, the end of the main axis, or the start of the main axis. Or of course, you can inherit. And then you have a couple others here like space around and space between. But you know what?And then you have a couple others here like space around and space between. But you know what? Let's save that for another example that will illustrate those a bit better. So let's bring that back to center. Now align items, once again, it will be the cross axis. So by default, you can assume that's vertical, but it won't always be vertical. Okay, so once again, we can choose basically the same items here. So the end of the cross axis in this case would be the bottom, the start of the cross axis, Position to Bottom-Right 3:29So the end of the cross axis in this case would be the bottom, the start of the cross axis, and once again, you have a few others that you might consider. So now think about how much control you have here that you didn't have before. So if we wanted to position this in the bottom right-hand corner, then you could do something like this. Justify content will be your main axis, which defaults to the x-axis if you want to think of it that way. So we'll push it all the way to the end. And then for align items, by default, once again, that will be vertical.So we'll push it all the way to the end. And then for align items, by default, once again, that will be vertical. So let's do the end as well. And if I give this a refresh, it's in the bottom right-hand corner. So you have an incredible amount of flexibility here, and we haven't even scratched the surface yet. So in the next episode, we'll take another step.
