Flexbox Layout Exercise: Medium Screens

[00:00:00]
>> All right, so now that you've worked with Flexbox a little bit, you are going to do the following. You are going to take these little cards here, at desktop, they're all going to align on the bottom on their buttons. And then as we get smaller, then we're gonna have three cards across the top, we're gonna have two cards on the bottom.

[00:00:24]
Notice that our buttons don't align, why is that?
>> It's not a grid.
>> It's not grid, we're working with Flexbox, and there's no way to align all the buttons here in space. And then in mobile sizes, we're going to stack these up top to bottom. So let me start you on this challenge.

[00:00:45]
What we're going to do is start off by getting all of these guys stacked up like this. And I think they might already be there. That's pretty close. Yeah, okay, so when we get to less than 850 pixels, what I'd like for you to try to do is code it to look this way.

[00:01:14]
So we're gonna have our cards, you want to actually have to change the layout of the cards. But I want you to figure out how to put three of them on top and two of them underneath, centered on top of those three cards that are on the top, makes sense?

[00:01:33]
Okay, fantastic, all right, so hopefully you got through the first part of these Flexbox layouts. Let's go through what my answer looked like. So, what we're going to say is, you could go all the way back to whatever starting point you wanted, what I said was @media. And then min-width of 600px.

[00:02:05]
Then I'm going to do some things to my particular layout. So two photo-cards, which is the parent, here in the HTML, I am going to say what?
>> display: flex?
>> display: flex, always a great start, okay? And that'll put all of my cards there together, so easy.

[00:02:29]
And then I'm going to say flex-flow: row wrap. And when I do that, it goes back to looking exactly the way it did, why is that?
>> Cuz those images are big?
>> Those images are big, that's actually an excellent answer, those images are big. And we have not set a width or flex basis for each one of these cards.

[00:02:56]
So, when we tell them to wrap, we expand to the biggest piece of content that we have, which are these images, and that's exactly what happens. It looks like everything goes away, it's still Flexbox, though. So we can say justify-content, actually, you know what, before I even put in these other properties here, let me go on to the individual cards themselves.

[00:03:22]
So what I'm going to say here for my card is, we need to give it a width such that we get three across, okay? And so you say, okay, well, how do we manage that? What unit should we use? What I like to use in this situation is a percent.

[00:03:38]
Cuz I never know how wide the window I'm looking at is, but I know it's 100% wide. [LAUGH] And so I can break each of my flex items into something less than 100% and try to get them onto one line. Through a little trial and error, I'm going to do flex-basis of 32%.

[00:04:04]
And that will get my cards onto one line, okay? So you see that I have a little bit of space over here on the edge, cuz these are still flex-start. I haven't set my gap and I haven't set any alignment, okay? And what happens, of course, is that two of them wrap on to the next line through row wrap, makes sense?

[00:04:25]
Okay, so now I can refine my look. And the way I would refine my look is, I could say justify-content. Here I said space-evenly, but you can could certainly say space-between, that would be fine, too. And then I wanna have a little bit more of a gap in between things.

[00:04:46]
So you could say something like column-gap of 2%, okay? So again, we can do math, 32, 32, 32, add that together, that's 96. Add together the 2% between each of those cards there, that's another 4%, so it adds up to 100%, makes sense? And because we have the set to space evenly, when we come down to the bottom, the gap here is a little bit bigger, okay?

[00:05:19]
And then maybe we wanna row gap as well. Let's say that's, whatever, 4rem, just for readability, kind of push that down a little bit, makes sense, cool? Yeah, all the marketing people are super happy.