Add even space between div tags using flexbox with no outside margins

All right, you're back, I'm back. This video, we're going to talk about spacing, in between our little boxes down here. Super easy, using Flexbox. The cheat is, just add that, and you're all right to the parent, but let's talk about it a little bit more in the video, so that we would really understand it, plus hang around, there's a shortcut sheet at the end. All right, see you in a sec. 

You might have seen this in the last video, but before we can get started we need to fix a little syntax problem. You might have noticed, I forgot to put these, the semicolons at the end. And why didn't it break it? Still working fine. It's because it's the last thing in this list. I said background, it needs the semicolon to know that's finished. Then the same with minimum height, needs to know it. Then this, one to get started, but there's nothing after it so it's fine. It's not until you go, "All right I want to do something with the… I don't know, display, but it just doesn't work. It's the wrong color, and doesn't pre-fill in. It's because I forgot these fellas. That's fine, got that out of the way. 

So what we want to do is we want to add some spacing. I'll show you the bad way and then the really easy way, because we could just go through-- we need to make the boxes a little bit smaller, because there's no room at the moment for spacing. So we could just go in here now, and say, actually let's make this-- let's just make it 30% for all of these. Now I'm going to use my multi cursor; have I done multi cursor yet? I think I have, I did, anyway, if we haven't, you can hold down the, on a Mac it's the Option key, on a PC it's the Alt key, and you can click once, twice, three times. See my cursor is flashing on all of them, I think we did it a slightly different way. 

If you are not sure of the shortcut, or it's not working for you, it's this one here, it is, there it is, there. You can switch between Command click for a multi cursor, or there's another option, which is Alt click. You can toggle between those two, just work out which one works for you. Then we'll go to your handy-dandy shortcut PDF that we gave you, remember that? Let's type in '30', nice, 'Save All', preview. Now we've got some space, it's all over here, so we want to put it in between, and we could do this, we could go 'Margin', so the first one's going to have a bit of margin on the right, and it's so we want it to be 20 pixels, awesome. So that's there, and in this one I want 20 pixels on the right of this one as well. Come here, you, you. Awesome, and then on this one, you're like, "Ah, it's too much", so it's increased this one up a little bit, we get it to the edge and you end up--

Tthe biggest problem is we're mixing percentages with physical sizes. So the real easy thing to do is delete this, and another one of the perks of Flexbox, we've been learning lots of perks of Flexbox, get rid of-- we need the widths. All we need to do to the parent is say, actually I'd like you to, justify, justify content, and I want it to be-- there's lots of different ones, we're going to use space. Now there's two that you'll use, space around, and between. I'm going to do-- let's do around, I'm going to put in a semicolon. So all the children are going to space out nicely, let's have a little look. Cool. 

So it's put space either side. So there's this, they both have equal amounts either side, they kind of double up in the middle, because he's being-- they're both kind of connecting together. The other way you can do it is the other one, so we did space around , and the other one is called space between. Save it, and that's the one I want, I think, there you go. So it just separates them out nicely. Thanks, Flexbox. And if you're like, "Oh, there's Flexbox stuff", I'm never going to remember that as well because I do that, I'm like, "Is it Justify Content?" There's another one called Justify Items, I think, anyway. 

What I've done is I've given you, in your Exercise Files, in your Shortcuts Sheet, this thing called Flexbox Sheet by Joni Trythall. That will do. This is really cool, really pretty as well, good work. It's quite long, you might want to print it off. You might want to just look at it like this, and it just gives me kind of some basic understanding of them. You can see here, to activate the powers of Flexbox, the container needs to have Display Flex on it, and then the children, let's say this one here. The one we wanted was, what did we do? We did, Justify content space around. Space between. Go right to the edges, so it's got nice little visuals of it, which I find super useful, you can just go through and just kind of--

We're going to cover lots more of this in the course, but we'll refer back to this one, thanks for this, Joni. All right, that's it for this one, we've done our spacing. Let's get into the next video.