Flexbox Review Solution

[00:00:00]
>> Jen Kramer: So we're gonna start here with, this is the Flexbox answer. This is the Codepen, the URL for this Codepen is inside of your instructions for chapter one and you can follow along here. So, as you see over in my HTML, I set this up with a whole bunch of divs because there's absolutely nothing semantic whatsoever going on in this code.

[00:00:18]
We have the letters A through H, the end. So I've just used div tags here. I gave you a class for every single one of those inside divs, and then a class on the outside as a wrapper. Remember that the key to Flexbox is parents and children, flex containers and flex items.

[00:00:38]
If you remember that relationship, Flexbox becomes so much simpler. So what I've got going on here is, first of all remember what to declare on the flex parent. That flex container. Here on the wrapper, we've gone ahead and set this up to display: flex. We've said row-wrap, okay?

[00:00:56]
Cuz we want to put everything on rows, it's gonna wrap onto the next row potentially. I've had my justified content as space between. Which one is space between? How does that look?
>> Speaker 2: Everything except the ends.
>> Jen Kramer: Everything except the ends, right? Let's push it all the way on out to the edges and whatever space is in, we'll just put in between the remaining boxes.

[00:01:18]
Why did I pick that? It was convenient and it looked nice. Okay, actually it doesn't really matter that much with this particular layout, if you don't mind a little bit of white space on either end. You could've done space between, for example, you could've done space evenly. A lot of other things you could've done.

[00:01:34]
But in order to get the boxes all the way to the edge of the screen like that with no white space, you would need to use space between. Okay, the other thing you might have noticed is that the content is gonna define the width of that box, isn't it?

[00:01:47]
At least to start with. And so align content of stretch is gonna go ahead and stretch those boxes to fill the full widths.
>> Jen Kramer: Okay, some of you are looking like you're learning for the first time. Ooh yeah, these are some of the things that we tend to look up in Flexbox.

[00:02:03]
We have a little cheat sheet, we look them up. I have one from the previous class that I taught here. I'll go ahead and add that to the Github repost so you'll have that to refer to. It's just a whole bunch of properties you can take a look at.

[00:02:13]
[COUGH] All right, now to put a space in between everything. This is the hard part here, how are we going to go ahead and put a space in between on a row by row basis? Well, I use this cool little selector here. I said wrapper, and then this weird looking greater than sign and the star.

[00:02:31]
What does that mean?
>> Speaker 3: It's the children.
>> Jen Kramer: All of the direct children of wrapper. Yeah, okay? So if I'd had other stuff between those divs, they wouldn't have been effected or inside of those divs, other than just the letters. So here, this is going to put a margin on the bottom of one round.

[00:02:50]
So that's going to give us our space in between the rows. Make sense, okay? And then all I need to do is tell it what the flex basis is for all the rest of them.
>> Jen Kramer: So it's 66% for those that look like they take up two columns.

[00:03:05]
30 or, what did I say? 32% for those that are a single column and then 100% for the one that takes up the full width. And the reason that those are not. Those are not fully adding up to 100% is so that we have a little bit of space in between these.