Flexbox Exercise

[00:00:00]
>> Alright, so, going into our good friend, Flexbox. We've got just something kind of simple we want to play with here is, we got a bunch of quotes. And what we want to do is, at the smallest viewport, we want, I think this column view totally works. I'd love to see a little space in between these.

[00:00:17]
These feel a little cramped. And then as we kind of go to some of the other viewports, as we go to medium and large, maybe it's a row, maybe that row wraps. Kind of whatever feels right. The goal here is to try out the break points along with some of the different Flexbox options, and get a feel for how they interact.

[00:00:38]
And we can kind of see that, and I got a little bonus. I've been trying to hide other little utility classes throughout this, and I'll show you a tiny little one that's not that important. But the main goal here is to get a sense of like, try to add some spacing in between them, try the different layouts in the different viewports.

[00:00:56]
And then we'll try it all together in about five minutes. We want to try a few things, we're just kind of getting a sense of Flexbox in this case. And so one of the things we can do in this section here is, it's super easy with Tailwind. So we can do flex, that will, that's weird.

[00:01:22]
But we could also do a flex column. Right, it seems, in the very beginning, that seems reasonable and good. And then maybe at larger viewports we'll try something else. And then what we can do is, you could use the space x, and that'll work great in this case, because again, it just adds a margin to everything.

[00:01:48]
But then you've got to switch it to a space y. I think there was a period of time where GAP was better supported in grid than it was in Flex. I don't know when that time was, because by the time I read that, I'd been using it forever and it was fine.

[00:02:09]
It works all the time. So we'll do that. So we'll say, you know, GAP 4, same rules as ever before, and we kind of get that initial sense. And then we can pick a viewport where we might choose to change it. So we have the flex gap, and we could say, let's get a little bit bigger here.

[00:02:27]
That seems like a time when maybe we'd choose to, I don't know, what was the width at that point? 620. That's only, I don't agree with their screen sizes. That's only small in their minds. And I'm not putting back that extra small right now. So we can stay at small, maybe we want to say flex row, right?

[00:02:58]
We can go as small as 640. Wow. So, all right, we go all the way there. And now what I might choose to do, at that small, is also say item start. Right, and they'll kind of go towards the top, right? And again, we could argue if this is exactly what we want in this case, but we can kind of see that we can begin to put these together.

[00:03:23]
We could also say, at small, we want to Flex wrap. Basically, the workflow around this makes working on this stuff super easy, right? I don't know if I love that so much there. But you can kinda play around with it. But it does make the process of doing the different viewports, especially like, you've got the Chrome Dev Tools, you know, they switch between them and have a bunch going.

[00:03:56]
The workflow of looking at the markup, changing the markup, in the large state of things. If you're jumping down to a, maybe the child needs something in a given sense. It actually is a workflow that works out super, super well. We could even, there's various things we can do here, as well.

[00:04:13]
Trying to think, is there anything we want to see in particular. We can change the gap at different viewports. We're saying maybe like, at small again, in so far that my screen is a little bit zoomed in. I don't have a lot of breakpoints at my disposal right now.

[00:04:26]
If I'm on my 5k monitor, I got a little more to work with. But we zoom in for this, I'm like the equivalent of a 2016, or earlier than that, MacBook with the screen. But we can say, okay, at a certain point the gap is 2, when we get to small.

[00:04:44]
I think I can go into responsive mode and do the fake version now, yeah! Right, and so that's the wrapping happening. And you can gotta begin to play around with this stuff, and get a sense of what works. And again, for the most part, we are playing with these things.

[00:04:59]
We don't actually have a real design we're trying to implement at this exact moment, which is totally fine. But you can begin to put these in place. Again, we had the item start in that case. We can swap that out. We don't, we got rid of that already.

[00:05:16]
We can do item center. And they are all gonna kind of go to the center. I could actually make this whole viewport like the width of the screen. And now they're aligned across that axis there. We could do... There's also, you know, the around, in between, and stuff along those lines.

[00:05:42]
These are a little bit big for that. But we could also say that, for the various articles, I'll say that the width is only gonna be, I don't know. Some of these are, yeah, as I'm playing around a little bit with this tinier screen, a little wonky, but it works.

[00:06:12]
And you can kind of play and get a sense of this really quickly and iteratively. But you have these two axes, it's just the the class names are slightly different. But, you can get away with a lot with just Flexbox in a lot of these cases. And have this in place.

[00:06:28]
And, let's get rid of that, it was a fine idea at the time. And it all kind of works. But it's really the mix with the responsive design that I think is super powerful. The little hidden thing is, if you ever need a space in your thing, it's just an underscore.

[00:06:44]
And Tailwind tries to be smart enough, if underscores are meaningful, then a space will do it, so on and so forth. But if you do need a space, you can use this underscore in there as well. And like I said, we can justify around, we can do, it's a little bit big for that.

[00:07:03]
But if we did item center, we can do item start, items end, and kind of get a sense. And it's just a bunch of classes. We don't have to remember where exactly this is defined, and what meaningful name does it have. We get those classes in place, we can begin to adjust.

[00:07:20]
And when I am working on the marketing site, and where it's interesting, the harder programming that I have to do is on the application that I work on. The harder layout I have to do is on the marketing side. So, just having this ability to kind of change these things and see it very instantly has been incredibly helpful for a lot of these things, as well.

[00:07:41]
So yeah, pulling all that stuff in, it does take a little bit time to get the like, slightly changed in the class names, your head wrapped around. But I will tell you, item center and justify center are almost always the ones that you want. And if you remember that those are the ones that get you to the middle, then you know that, end to start for the justify will get you on both sides.

[00:08:01]
Item start and end will get you mostly there. And then it's one of those things. You remember the two? And then from there you can get to each and every additional one. It's like, and then it gets me to justify around, and everything works along those lines, and it's pretty great.

[00:08:16]
Cool, so, like I said, you do need to put that flex class on that, as we saw earlier. I just left some notes in here that you can kinda play around with. But for the most part, use the tool, it will kind of make it very clear, and you kind of get a sense of where to start in this case, as well.

[00:08:33]
Awesome. All right, let's talk about, let's go back. In here too, if you want, there's other little treats for you. So for that justify content, you can go in here and just see them all individually, too, if you're trying to get a sense. A lot of them are set up a little bit easier to kind of see as an individual thing.

[00:08:59]
Justify starts, again, justify center will get you in the middle. You've got the ability to stretch. In this part, you can do the end, center. So, this is with a grid instead. Do the between, you can get a sense of what the one you're looking for is, rather, and pull that in.