Flexbox Layout Exercise: Large Screens

[00:00:00]
>> So now the next one we wanna take a look at is how do we make this go on desktop. We wanna put all these guys in one file next to each other and we wanna align them at the bottom of their buttons. I don't know why you'd ever wanna do this, but this is a good exercise just for Flexbox.

[00:00:18]
So, how about I give you like three minutes to take a look at the next media query and to remind you what that's gonna look like. It's gonna wind up looking like that, okay? All right, so let's go through the answer here. So we're gonna make my screen a little bit bigger now.

[00:00:42]
And now we're gonna work on our media query. So we search, of course, with media query, @media(min-width: 850px). So at at least 850 pixels, what are we going to change? Well, remember that we have some styles that are coming through. So the display: flex will carry through, the row wrap will carry through.

[00:01:07]
There are some things we might want to change here, notably, the justify-content. So I'm going to say my photo-cards are going to have a justify-content of flex-start. So that's gonna push us all the way over to the left side. Okay, so there's our guys pushed over to the left side there in the second row.

[00:01:35]
Now the hard part comes with math, isn't it always math? Okay, so I'm just gonna set this up here for the moment, card. And let's just say flex-basis is auto, cuz I'm gonna turn off what I have here. And actually, the other thing I'm going to do, these are just placeholders, just flex-flow: row nowrap.

[00:02:02]
Just so that we can look at this layout here with the five boxes next to each other for the moment. Okay, so we're working with 100% going across this page, right? We know that we have 100% going across. We need to have some kind of gap in between each one of these cards.

[00:02:23]
So let's just say for argument's sake that that is 2%, makes sense? So how many gaps do I have here on this page?
>> Four.
>> Four gaps, right? Because there's a gap in between each of the cards. We don't need to count the gap on the far left or the far right, but we have four gaps here.

[00:02:44]
If each one of those is 2% wide, that takes how many percent away from our 100? 8%, right? Four gaps, 2% each, is 8%. 100% minus 8% is 92%. We take 92%, and we divide it by five, as one does.
>> [LAUGH]
>> You can do that in your head, right?

[00:03:10]
>> [LAUGH]
>> All right, it comes out to be 18.4%. So, let me turn off my flex-flow here. And I'm going to set my card to 18.4%. So that'll give us our five cards here all in a row with that little bit of math, that's how we did that.

[00:03:33]
And now comes the last little trick. How do we align them all on our buttons? Did somebody get that?
>> Flex and justify-content inside the card.
>> Inside the card? So you want to say justify-content: flex-end, like that? Okay, doesn't work, why? Look up at your HTML. What is the parent and what is the child?

[00:04:17]
>> That needs to go in the parent, not in the child, it's the right rule.
>> Exactly, so it's gonna go in photo-cards, right? But you're on the right track, flex-end is is exactly what we want. It's not justify-content, that row justify-content, and we're working with a row.

[00:04:32]
So that's the alignment across the row. We want the alignment on the column. So what we want then is align-items: flex-end.
>> Yeah, the word content refers to the content of the parent.
>> If that helps you remember these things, I think that's great. Personally, I think all of these are just kind of random words, they really don't mean anything to you in one direction or another.

[00:05:02]
justify-content or align-items, they're kind of the same. But I have no better solution for the names of these properties, honestly. So, go W3C for naming all these things. I can't suggest anything better.