Getting div tags onto one line using Flexbox in HTML & CSS

Hey there, in this video we're going to, talk about stacking boxes next to each other. Seems kind of simple. In the previous kind of project, I kind of stacked everything all on top of each other, for a reason, just to make that part of the course nice and easy to get us started, but you're very quickly going to want to put things next to each other, which is quite natural, but by default if you start stacking things-- I made these little boxes, and I stick them in my HTML, and by default they really want to be on top of each other, and you're like, just go there. So we're going to use something called Flexbox, to get them to stack next to each other, like we want. All right, you're ready, I'm ready, let's go. 

Before we can add our Flex we need to create a couple of containers. So I'm going to create inside this Class of cards, our Div tag here, we're going to create three new Divs inside of it. We're going to call it 'Card1'. I have another one, actually I'm just going to cheat. Copy, paste, paste. So I want three of them, I'm going to call them Card1, 2, and 3. Now I'm giving them specific names, because later on in the course, I'm kind of forward thinking a little bit. I want, they're actually to do different stuff, because this one has a background of that image, this one has a different image, that one has a different image. They do different things. So I'm going to give them specific names. If your cards were generic you wouldn't have to give them separate names. Well, at least they could be all called Card1. 

Now let's style all these cards, so we'll start with Card1. Then we'll copy and paste it a few times. So we'll give it a background color, and a minimum height, the same as this. We'll change the color to be something even lighter. Actually we're going to switch color schemes, because my green plan is not working out perfect. I'm going to go for the, I'm not even sure, I want to say watermelon, no, grape fruit, anyway, pink. So we're going to go to this one. Taking far too long picking a color. We're going to use the same height, but minimum height, in case it needs to get bigger. We're going to give it a width, because I want three of them in there, right? 

So I want-- you could give it a pixel width, it's quite an absolute width, you could work out, all right, I want to go, was it 1024 divided by 3? Add some heading for it, and you can do that, or a nice easy trick is, it doesn't matter whether you use pixels, or in this case we can do a width of-- you do this for everything not just for these cards, so we can do width of percentages. So if we did 33.3% it's going to kind of-- other than-- we lost a little bit there but it will fit 3 across easy. So let's have a little look at what we got. 'Save All'. There we go, there's my first one. 

So I'm going to duplicate that a few times, twice. Not sure what shortcut I had there. All right, so I've got three of them, you, I got you, and you. I got these three, and I'll change the colors. Lighter. Not enough changed, Dan. This one here is going to go super light. So I've got three different shades of my pink. By default they always line up on top of each other, which is just the way it works in code. If you don't do anything else they will all try and stack nicely on top of each other, and that's where Flexbox is going to come into this. This particular video we're going to stack them nicely together. 

The way Flexbox works is, it's kind of new for, like if you've done a previous course of mine, we were floating left and right, that still works, but it's just harder to implement, because you've got a clear float and those types of things. If you've never heard of floats, don't worry, Flexbox just makes things easier, and it's new for html5, and it works on all browsers at the moment, which is cool. So all you need to do is, there needs to be a parent tag. That's why, with this group, these cards, have their own like little gang, or own little parent. So the parent tag, these are the children, because they're inside the parent, this parent needs to be told to flex, and everybody inside of it will nicely line up together. It's just a lot easier to do. 

So, find cards, and we're going to say 'display'. Thank you, we're going to say 'flex'. Make sure the semicolon goes at the end, and hopefully all the work's done for us; look at that. Now if you're new to Web Design, you're like, "Yeah, that's cool, nice work, let's go." If you've done it before and you're like me, I'm like, "Stop, no, that is amazing, I love it." The floating before, clearing floats was such a drama, now it's not, but I won't go on because you're probably new, and you probably don't care that much, as much as I do, but the thing to recap is that, because I could have got away with not having this wrapper here, because there's no real reason, because the main finish is when these guys start, but I wanted this wrapper because of this parent, because I want to apply flex to it. You can't apply them individually to the dudes or dudettes, you have to do it to the parent. 

So that's all we're going to do with Flexbox at the moment. You can rush off and learn more about Flexbox. I've kind of folded into this course to try and, I don't know, not throw it all into one video. So there is more coming about Flexbox, but for the moment, most of the time I'm using it, is just to get things to stack on its own line. That's it for this video, I'll see you in the next one.