Flexbox

[00:00:00]
>> Steve Kinney: There's stuff, there's flexbox tailwind specific. There is stuff just about flexbox. I think both of those are kind of fair game at this point. But we'll talk about flexbox and grid, and again, I will kinda cover in enough that if you're like, I kinda only half understand flexbox, right?

[00:00:18]
We will also kind of get into some of those details whilst doing it with tailwind stuff as we kind of go along. So I have that card list. I'm feeling like we should do it with the card list. I also have like a little grid playground that we can play in.

[00:00:35]
But I'm feeling good about the card list. He says, not remembering what he did to it last. Okay, so this is my card list that we saw before we played with some spacing. We took the spacing off, but here it is, it's back. So working with flexbox becomes very easy with Tailwind.

[00:01:02]
This one had divide and we didn't end up using that. So before we had that space Y4 that we did that added some space. Flexbox gives you a bunch of other options for doing this. And again it becomes very, very kinda nice and simple within Tailwind. And you saw me use a little bit of it, but with the input field earlier and occasionally sprinkled throughout.

[00:01:26]
The easiest way to make something a flexbox is to give it the class of flex. Now in this case you can see that that is very different than I had before, but possibly something that I wanted. Obviously this is a pattern. A lot of times you will want to put spacing in between them.

[00:01:46]
This will work for both Grid and flexbox. You can say, okay, gap four and this will put a four pixel gap in here as well. I'll make this bigger just for a second. So you can kind of see that they will kind of like get laid out like so cool.

[00:02:06]
And if I want to do, I can do flex reverse, flex flex row reverse. And now they're in the other order other than things that I no longer do because I have has and group has how often there's sometimes in responsive design you need to do stuff like that.

[00:02:39]
So flex gap 4. The other thing you do is flex column, Right, and they'll go in a column. And this is a place where a lot of times you'll see something like responsive design for a lot of these things. Which is this is a good layout if you're either A incredibly zoomed in, or B on a mobile phone, right?

[00:03:06]
But ideally this not so good. I mean it depends on what you're doing. But for our purposes, we can agree. Mike's face agrees with me that this looks a little ridiculous. So we can have both. The interesting thing you can do is there doesn't need to be an entire section where we talk about responsive design.

[00:03:27]
We're just going to sprinkle it in with flexbox and Grid. Because doing responsive design in Tailwind, arguably every time I get a little. Because, I don't know, maybe you're all better than me, but every time I start a new project, I'm like, the inner mark is in my ear going, I'm just going to do vanilla JavaScript and vanilla CSS.

[00:03:44]
And then I realize I don't have time for that, really. What keeps me coming back to Tailwind is some of the responsive design pieces. So here we can say flex and Flex column, But what if we wanted to, at a certain breakpoint, have it switch to Flex row?

[00:04:01]
All we have to do is say medium at the medium breakpoint or small or whatever, and we can talk about what these are in a second. But you can kind of see that this actually will create a class that has a media query that says if the width is greater than or equal to 48 rem or 768 pixels for those keeping home, then add the property flex row.

[00:04:27]
And all you need to do now, is that you just get responsive design with an extra three characters plus the class name you want to have happen, right? And it will break at that break point. These breakpoints are all totally customizable in that theme. If you wanted to have happen at small, you can do that as well.

[00:04:58]
You can even combine to say, hey, start as a flex column, then go to a grid, then do a flex row. Anything you want you can do as well. But all of these, you get those breakpoints for free at any given point. And they kind of work out of the box.

[00:05:14]
There are a few other things that we might want to do in this case that you need fairly often. One is just kind of the kind of alignment and stuff like this. These are all roughly the same height, and that's great. But there are other cases where like, things can get like a little bit trickier.

[00:05:41]
So if you have two things that are different heights, they will all go to the top. Just going to put it in this file because I'm very lazy right now. Div. And we'll say input type checkbox. We will put that in the same one as I don't know button.

[00:06:14]
Do a big fancy primary Button, which I think still says button, whatever. It doesn't take children at this point. That's fine. Now, as you can see, they kind of have a nice. This is what we talked about before with that space-x and space-y, which is they get laid out like this.

[00:06:41]
But as soon as I make it a flex, they all become flex items and they follow the flex box model at this point. So if I say that, we'll say gap 2. This one was fine, actually. We'll say H2 like cool. Let's say hypothetically that we wanted this to be centered, right?

[00:07:29]
We'll see this in another example in a second. You can just do item center. And now they're all kind of centered the way it was before. And you can even do justify center if you want to do that. Like the old joke of how do you vertically center something?

[00:07:48]
You can both horizontally and vertically center it. We'll give it a background so I can show you real quick. So you can use Flexbox 2 very quickly. Justify is justify content. The one thing that took me forever to kind of memorize and get through my thick skull was that they do use these shorthands, which are maybe not the shorthands that I would have picked, but because they are utility classes.

[00:08:19]
Align was used, I think, somewhere else, which is justify, center, justify, start, justify, end. That makes sense. But items is align items. They chose the other word that I would have chosen, but luckily the hovering over is pretty powerful. We'll play with this a little more when we look at the grid too.

[00:08:43]
But arguably for most of the time, the ones that I typically want to do is center stuff, so on and so forth. You can do put everything towards the end, put everything towards the top, towards the bottom. Usually getting stuff centered around that axis is predominantly what you want to do.

[00:09:01]
So in this case, if we took off the item center, you can see that they'll jump to the top. If you took out the justify center, you can see that they will jump to the beginning, right. If I did justify end, they jump to the end. What you think happens happens in this case.

[00:09:23]
But yeah, there isn't necessarily a whole lot of extra ceremony in this, right? You can kind of very quickly add a few utility classes, which again is where a lot of the kind of power comes from. Right before you would have to jump back in, set up all the properties, probably set up three or four different properties here.

[00:09:41]
You can kind of like inline and also like when you have something like react or svelte or angular or what have you. The ability to just apply these utility classes very quickly based on the state in the same file versus whipping up a new thing or trying to use inline styles and stuff like that becomes incredibly quick and incredibly powerful.