Flexbox

[00:00:00]
>> So with that, we can kinda start to move on to the big dogs of layout, flexbox and grid. One of the tricky parts of Tailwind, and it's only just like, as you get used to it again, is first of all, let's be clear, most of us don't remember half the properties on a flexbox or grid to begin with and have to look it up on MDN every time.

[00:00:29]
But then when they kind of changed the names of them a little bit, it adds an extra level of unfamiliarity. So I'm going to assume that you've probably flexboxed a little bit before, a non-zero amount of flexbox or gridding before. But I am going to also assume that the way that Tailwind presents that terminology might be a little bit new as well.

[00:00:52]
So we're gonna re-calibrate our brains a little bit, and just kind of get on board with the way that Tailwind describes it. So for flexbox, you have two axes, the main axis and the cross axis, right? Out of the box, the default lineup for flex is flex row.

[00:01:15]
So if you don't say anything about what kind of flex you want, you get a flex row. If you say you want a flex column, take this, rotate it, I guess rotate it, whichever way you want, I don't care. And then there's reverse to actually flip it the other way as well.

[00:01:30]
I did that in CSS, I'm pretty proud of myself, that's not a picture. And basically, you get a few different classes. You get justify content, justify items, align content, align items, and then you get place content and place items. And I have a little sandbox play area where we can kinda play around with this a little bit as well, and we'll explore that.

[00:01:56]
But the important part, and they're mostly aligned to the properties under the hood in the CSS declaration. But you get at one point where it's like they're just different enough that re-calibrating on the Tailwind nomenclature for it to make sense. So justify is where do you want it on this axis, align is where do you want it on this one, and then place is effectively both, right?

[00:02:25]
But the problem is a lot of times I want where I have the items, you'll actually see this when we get to the class names, it's a lot of fun. If I want it centered, I need justify content center and align items center. I only know this cuz I do it 1,000 times.

[00:02:44]
But let's actually go take a look at the little playground here that we have. I'm gonna zoom out a little bit. And it's basically a way to re-calibrate and just think about it. So I have these drop downs, they're all named by the Tailwind classes, not by the actual regular property.

[00:03:03]
So mostly it's like, if you find yourself struggling to remember what Tailwind calls them, then you can kind of play around with the classes in here. And the flex wrap one, that's not the one that anyone has ever forgotten, right? The interesting one is we've got that justify content, that's got the same name, it's justify start and center.

[00:03:24]
So I put center, they move to the center along that main axis, right, the horizontal one in this case. Where it gets a little squirrely is, all right, align content doesn't have the word align in it, it's just content. So you do need to know that it's different than justify content, which is justify, and align content is just content.

[00:03:48]
And the other one is for justify items, that's justify items start, end, and center, and align items is just items. At one point your brain will just click and you will remember them. I wish I tried to come up with a cute heuristic that you could say in your brain, eventually you just kind of get a sense of it as well.

[00:04:10]
So we can say, for instance, align items center, we'll put them across the axis in the middle, and so it's stretching them out. And then we could say justify content center or justify center, and we get them in the middle like this, right? And these are the Tailwind classes.

[00:04:27]
So if you are just like, I don't remember, I'm tired of typing in different classes and command tabbing back over to my browser, you can kinda take a look at my little toy that I didn't totally make for me six months ago or anything along those lines, I would never.

[00:04:43]
The other interesting one is the gap. And these are the Tailwind gaps you can kinda put in there as well. They're the same units that we've seen everywhere else. And so it is kind of powerful. The other thing you can do in this is if you right-click on any of them, you can change the individual ones as well.

[00:04:59]
So, for instance, we can say, And now this one will follow its own rule. The items basically are just applying align self, justify self onto all of them, but obviously the individual one can override it. And the nice part is it's all stored in query params, so you can save it and remember what it was at some point as well.

[00:05:24]
If I was a nicer person, I would have it generate the classes down below for you to copy and paste, but I didn't think about that until just now. But you can kinda figure it out as well. So kinda thinking about that again, we'll keep the 8 in there.

[00:05:36]
This one, let's put itself back where it was. So you can go ahead and figure out the, again, justify that main axis. And the content is the entire group, items is then applied to each one in there for itself, right? So, for instance, item center is the one that you always want when your text is higher than the image, you just want them in a straight line.

[00:06:03]
That's where you're trying to take all of them and move them down along that axis as well. Justify center is the one that will kinda get it in the middle here as well. But depending on what you're trying to do, you could be trying to make a menu where you want all the items to go on that side.

[00:06:21]
Whatever you're seeking to do, there is an option in here. And then you can actually add more boxes if you want to. And then the other one that is a lot of times very useful is this idea of flex-wrap, where you can have them wrap, once I hit, wherever they're supposed to go.

[00:06:41]
And so, you got to figure out what layout you're looking for and get a sense of it. If we go with flex column instead, they will line up like this. We turn the wrap off and they go out of the box cuz I didn't wanna deal with not being able to see them.

[00:07:01]
Cool, and so, yeah, you can do all the different options that you want here and play around with it. But the classes are named a little bit differently, and it does take a little bit of time to kind of fully wrap your head around it. But all the rules of flexbox apply, particularly flexbox I think is super easy with Tailwind.

[00:07:24]
Again, item center and justify center are the two that you want. The ones you were thinking of, those are the ones you want. The other ones you will use one day, probably. But those are the ones that tend to be the ones I find myself using, I never want the entire flexbox at the bottom of the thing, I can't remember the last time I wanted that.

[00:07:47]
But if you do need it, you can figure out what exactly you want in that case, and put it all in place. And we'll play around with some of that, but I usually, honestly, started with a joke with my team of that would none of us could remember.

[00:07:59]
So I made it as a gift joke. The other interesting thing, obviously with flexbox is, we can tone that down a little bit, is if you need to figure out the grow shrink basis. There's the ability to do an order, there's a click outside but it doesn't. We can say orders to, so you can put them in different orders, so layouts.

[00:08:23]
This is usually what we will do in a responsive design situation, which is like, cool, maybe I wanted that at the top in this one situation but on a different mobile screen, it should go somewhere else, I don't wanna rearrange stuff in the DOM. You don't have to.

[00:08:40]
As you can see, the rest of them have the default order. So something with a higher order goes to the very end, right? Do an order first, it will go to be the first thing. So a lot of times with our different responsive designs, if we do need to move stuff around fundamentally, these exist for us.

[00:08:59]
And the nice part is, you don't have to hold a lot of complexity in your head other than remembering these class names, because you can just do it all inline. You can be like, hey, at the smallest viewport, it should be first, right? But then if we get to a larger one you can do order none, and it goes back to where it would have been in the DOM, right, and stuff along those lines.

[00:09:21]
And you can kinda get a sense and move stuff around in that case. Also, how it grows if you wanted to have the columns at the different viewports, you can figure all these stuff out. And those responsive styles make it super easy in this case as well. This is here cuz we're gonna do a few little exercises in a little bit.

[00:09:43]
And this is here if you are like, I need help, this exists for you.