and all we want to do, like I said, is put this perfectly in the center. Okay, let's go to our CSS, and we can say body, let's do some setup, background green, color is white, and then because we don't really have a site here, we need to do that thing where we set the body in the HTML to a height of 100%. So this would be good for like a splash page. Okay, so now we want this centered. So do you start with this text-align center, and then do you try to do the line-height? Do we do 100% or do we do 500 pixels? Do we try to cheat or do we do display table? No, we just use Flexbox. display: flex, align-items to the center, justify-content to the center, and we're done, believe it or not. So check it out. Let's clear these out, and yep, perfectly centered on the page. And if we were to make this bigger, h1, font-size is 100 pixels. Yep, perfectly centered on the page. Okay, but what exactly did we do there? Okay, well the first thing, if we want to use Flexbox

And now how would we go about aligning these links? Well, you do stuff like this, right? You say display: inline, and then you say margin-right, and you just sort of try to get it to work, right? But notice they're not taking up equal amounts of space here, right? So then you think, well, maybe I can just say width: 25%, and then let's zero out any margin or padding here. Okay, so now I could set a background-color of yellow, but now that won't work because we have display: inline. So we can say inline-block, and yeah, it's like, oh my gosh, I'm just trying to display these, and I can't even figure out how to do it. Once again, Flexbox to the rescue. So we'll get rid of this entirely, none of this stuff here at all. Instead, I will say display: flex. Okay, so notice when we say display: flex, everything immediately aligns according to the defaults like we just talked about.

writing by creating a media component, and then you only need to add that class when you want this section of your site to take that shape. All right, so once again, with traditional CSS, well yeah, you'd like float the image to the left, right? So you do something like this, float: left;, and yeah, that might be okay. You could add some margin-right of 10px, or what have you. But yeah, then once you do something like this, maybe you have another paragraph. Well, yeah, we have that trap, and we've all hit it, where it's like, crap, this went onto the other line, how do I do this? Do I then do something weird, where I say margin-left is equal to the width of that, and then I'm not sure what it is, so I'm just going to keep going up. You've done this, and you know you have, right? This is just kind of a crappy way to do it. It's an old-school way to do it. Once again, with Flexbox, it's so much easier, folks. We will say media { display: flex; }. Yeah, it just instantly

we just added display: flex and everything aligned horizontally by default? Okay, well, let's try that. Now, we could apply this styling to the body, but in real life, you might have a container or something along those lines. Just some kind of wrapper for your content. Okay, well, now, I'm going to say container { display: flex; } So now, we have two different instances of display: flex, which is fine. And immediately, we see these bump up. All right, so now, we can add our margin-right: 1em;, and we're not using floats anymore. And also, notice that because we're using flexible layouts here, everything will automatically adjust accordingly to fill up the space. And of course, in the situations where you don't want to do that, there's ways around that as well. But yeah, take a look at that. And then, once again, we could say box:first-child if we want this guy in the middle. Or why don't we change that? Let's