Flexbox

[00:00:00]
>> So I say, it's modern, but I mean flex has to be, in terms of when they standardize, it has to be a decade old at this point. Still feels new to me cuz I started writing in tables, right? I didn't start before float was standardized, but I started before float was everywhere.

[00:00:20]
I'm just gonna scratch the surface on this, Jen Kramer has a whole course that gets into the depth and nuance of flex. So if you're really into this and you really like it, wanna get further into the spatially laying out things, I'd suggest going and taking several of Jen's classes.

[00:00:36]
And there's a whole CSS learning path on Frontend Masters that you can check out as well. So let's try this instead. This was really easy to accomplish. So I had this flex container, so the thing to know about flex is you're gonna set flex on the parent, right?

[00:00:54]
So I had this flex container here, and if I wanna lay out things inside of that, like I want these boxes to be laid out in particular way, I'm going to set flex on the parent not the children. I found that confusing when I was starting out. So I had the flex container here, and noticed that display flex is on the flex container, not on the boxes.

[00:01:14]
So you don't actually lay out yourself, your parent lays you out. So this is just default display flex with nothing different about it. It just lays them out like this all in a row next to each other. Same sort of thing, if it runs out of space, it should just flow.

[00:01:34]
It will actually doesn't have flow over, what it does is it actually squishes things to make it fit. So notice that these do have set heights and widths, but this display flow, it's gonna be like, well, I'm running out of space, so all of you are gonna compress in an equal way.

[00:01:52]
And that's what happens with flex. So they don't wrap, they squish. Now, I'm just gonna show you a bunch of fun things to do with flex cuz it's really easy to do and I find it kinda entertaining. So notice, this is 1, 2, 3, right? Same thing here in the code, 1, 2, 3.

[00:02:13]
But in here, it's laying out 1, 2, 3. And all I have to do is roll reverse, and it just reverses everything inside of it. Just kind of fun. What happens if you wanna make it a column? Same thing, flex-direction column, Okay? So that's direction, let's talk about justify-content.

[00:02:41]
And by the way, column reverse would work as well, in case you're wondering. So the 3 is on top. So if I justify-content right, notice that before these things were going left to right here, right? But if I say, justify-content to the right or to flex-end or wherever the end of the container is, it moves everything to the right.

[00:03:08]
Why is it called flex-end instead of right? Cuz you have to think about this can also go in the column direction as well. So it goes to the end of the container instead of the beginning of the container. Now, if we did flex-direction column, This isn't gonna look any different because the end of the container is where it stopped anyway.

[00:03:31]
So I would actually have to give this a height of a thousand pixels for us to see the difference. So now, notice that it's actually anchored to the bottom. Whereas if I took this off, it's anchored to the top. Right now, the flex-container is getting as big as the items are.

[00:03:58]
So it doesn't matter if it's at the beginning or the end cuz it's the same. Okay, center, notice that there's space at the end of this, right, which is nice. So you can do left center or flex-end. Right work here, it does work. But I would say, stick to flex-end cuz that's a little bit more generic.

[00:04:31]
I just wanna take a second here and express how hard it used to be to center stuff. It was so hard for so long, and vertically centering things, which we're about to show you how to do, used to just take days out of my life, both in terms of how much time I spend doing it and all the stress that it caused me.

[00:04:53]
With flex, everything just got so much easier. Okay, so that's center, that might be useful to you. You can also do these fun things, where you can do space-between, where it'll equally space them out. So notice, this goes all the way to the left, all the way to the right, and there's equal spacing here.

[00:05:11]
That's space-between. Space-around. So now notice that there's a little bit of space, and so it'll give you a little gutter on the beginning in the end as well as on the beginning. That's space-around, and there's one more space-evenly. So the way that this actually works with space-around is the beginning and the end will split a gutter, right?

[00:05:37]
So this is half of this. If you do space-evenly, Now everything beginning and end will get its own one piece. I tend to use space-around cuz I think it's the most aesthetically pleasing, but that's gonna be up to you. And it depends what you're doing. Align-items, this one's super useful as well.

[00:06:05]
So let's say I wanna do flex-end. So this will push everything vertically down, right? So now, all the stuff is aligned on the bottom vertically as opposed to being aligned at the start, so fle-start. So that's helpful. Center. So again, this what you're seeing here, this vertically aligning something in the middle of something is so hard to do.

[00:06:36]
And this is just me, like telling you that I used to hike both up ways in the snow when I went to school, but this was used to be so hard. And I want you to appreciate how much easier it is now. Okay, that's all, that's my whole spiel, I'll stop being an old man.

[00:06:54]
If you want a good time, go to Stack Overflow and just see the decades of human life loss of people trying to vertically center divs. Okay, there's also this fun one called stretch. So even though these have heights, if you give it the stretch and you have to remove the height, that's also true.

[00:07:17]
Cuz I think if you, Do this, it'll actually respect the height first before it does the stretch. But if you get rid of the height, then you can actually have it stretch the height of everything. So this might be useful if you have tiles that have text on them, and you want them all to be sized the same way, despite the fact that they have varying amounts of text.

[00:07:41]
This stretch can make it really easy to make all these things the same height no matter what. You might wonder what inherit means. It just means this box-1 might have some height associated with it. If I say inherit, it means ignore what I previously said about it and just do whatever the default is.

[00:08:03]
It's basically unsetting a CSS property. Okay, So here's another fun one of, like flex-grow. So let's say I wanna do stuff like proportional widths in some way. I have this one that is flex-grow 1, flex-grow 5. So this 5 here is 5 times bigger than this 1, and this 10 one is 10 times bigger than this 1.

[00:08:34]
And it kind of like proportions out the sizing automatically. So if I say here, instead of 10, I put this at 100. Now, this is substantially larger than this one, right? So it just proportions out that sizing for 5. So now, these will be the same thing, if I did 5, 5, and 5, they'd all be taking exactly a third.

[00:09:01]
Now, why would you do it that way, I don't know. But you could, it also just be the same to just say 1. That's what flex-grow is. Notice that the flex grow property actually goes on the individual classes themselves and doesn't go on the grill part of it here.

[00:09:26]
That's not even valid CSS, that should be like this. That's funny. Good job, Brian. So notice all these things, I'm not actually rewriting any of the CSS here. Actually, let's refresh the page, cuz I have changed a lot. Now, I'm just combining all the classes from the previous one and not writing any new CSS.

[00:09:48]
If I do flex-container, ai-center, reverse, and justify-content, space-around, it's centering everything, so it's all centered. It's reversing as it goes 1, 2, 3 from right to left. And then it's justifying the content to space around, so now there's little gutters here on the right and left. So combining all these various different properties of flex, you can get some really powerful layouts and get everything laid out exactly how you expect to.

[00:10:22]
I use flex constantly. I abused flex with how much I use it. Then it makes laying out things just so nice. So same thing here, flex-container, this is going a line items fe. This is the problem with terrible classnames, I was being clever. Flex-end, that's what that stands for.

[00:10:53]
So it's all going to the right, and then it's going in a column direction. So that'll make everything move to the right, and then it goes in a column. So hopefully, you're starting to see, okay, if I combine this with this other way, then I can get flex to bend to my will.

[00:11:15]
So I showed you a subset of ways that flex can be done. One, definitely check out Jen's class, if you're interested in that. There's a great CSS tricks article on it, that I think is by far their most popular article. I almost always have it open because it just has everything succinctly described.

[00:11:33]
So check out that if you wanna know about that. We can use flex-wrap to get things on different lines and different pages and have multiple lines of flex, there's a lot of cool stuff you can do with it. I actually used to use flex to basically do a grid does before grid was available.

[00:11:51]
But then grid came out, that became even easier using grid.