Flexbox Containers

[00:00:00]
>> Kevin Powell: On to flexbox. Flexbox came before grid. Because of that, a lot of people teach flexbox before they teach grid. I've taken the other approach, as you've seen. I use grid for a lot more now than I use flexbox. It was a very slow transition for me. Flexbox for everything so we had nothing else to do it with, grid for big complex layouts, and then you start realizing, no, grid can do simple stuff too, and it started replacing a lot of the things that I actually used flexbox for previously.

[00:00:26]
The good thing with learning both of them is there's a lot of similarities between the two in terms of alignment and justification. Those properties are going to come back. Other things that are similar are that when we declare a display flex, the items become flex items. So like with grid, we had our grid items, they live as a grid item now. The display block inline goes out the window. Same with flex items.

[00:00:47]
They are now a flex item, they live within the flex context. Grid is really good at creating structured layouts. Flexbox is much better at what we call intrinsic layouts. To show you what I mean by that, let's open up this demo. Very similar to our getting started with grid demo, we're going to see right away, as a quick reminder, we started last time with a display of grid and it was a letdown because absolutely nothing happened.

[00:01:13]
When we use a display of flex, it's magical. Things happen. It feels very, hey, I did something, so that's great. People say grid or flexbox is simpler, but then ask them how this is happening, and they cannot tell you. So it is not necessarily simpler. But it does offer up the gap property as well, we saw that. So gap 20 pixels, we get some space between them. Now, a few important things have happened here.

[00:01:41]
Our items have gotten smaller than they were before. With grid, they stayed the same, and grid items always wanted to sort of be as big as their cells could be. Flexbox items work the opposite way in a sense. They've shrunk down, they've got next to one another, and they're trying to be as small as possible. So if I add text to one of these, as to say grid one is bigger or item one is bigger than the others, and it's now bigger than the others.

[00:02:09]
Flexbox wants elements to be as big as they can possibly be without being, like matching the content size, let's say. So this is the size of my content, that's how big flexbox wants the items to be. So this one's smaller because it has less content in it. This one's bigger because it has more content in it. This is what's wonderful with flexbox. Grid is structured. Display grid, how big are the columns, then the items fit into those columns that you've created.

[00:02:35]
Flexbox is display flex. You guys are flex items now, you figure out what the layout's going to be. So there, and how is it figuring out the layout it's going to be is primarily based on the content size of those elements. The other thing that's with flexbox is, as they get smaller, they will squish, which is cool. We didn't have this ability very easily in CSS before flexbox. This was very exciting that this happened.

[00:02:59]
So we can squish things down, which is cool. Now, the one problem is this, where all of a sudden they shoot out the side. We saw this was a problem in grid too for too prescriptive with the sizes of our columns, we get overflow. Flexbox feels more responsive because items squish without us having to do anything, but it does potentially run into the problem of overflow. So there is one property that we can use along with this, which is flex wrap of wrap.

[00:03:28]
One of the most infuriating things with flex wrap is the default value is no wrap, but we write it like this. I don't know why they didn't hyphenate it, but they didn't. Everything else in CSS would be written like this, but nowrap is written like this. You will very rarely write this, it's mostly if it's in a media query and for some reason you have to turn off wrapping, but it's not very often, so at least you don't have to worry about it.

[00:03:53]
Flex wrap, wrap, and that means now if the contents run out of space before they start squishing, they will start wrapping. So wraps down, wraps down, wraps down, wraps. Now this one can't wrap because it's a single element, so instead of wrapping, it will still have that squishy behavior. This is one of the reasons why flexbox feels easier. I've done three declarations, we don't even really need a gap on there, so with two declarations, you can make a layout, it works pretty well, that doesn't cause any responsive issues, so it's very satisfying to get it to this point.

[00:04:28]
And to use it like this, this is the use case for flex. Just to get things to be the size they need to be, wrap around, stuff like that, it's perfect. As soon as we want to create a more structured layout with flexbox, that should set off some alarm bells, because grid is good at structured layouts. Flexbox is good at these layouts that are squishy, that move around where the elements are all different sizes.

[00:04:48]
There are ways you can wrangle a flexbox to try and force it to. They work, we use them for a long time. But I can't do that on the parent. The parent has about this much control. There's some alignment stuff that will come up later too. To do more control, we actually have to go on the individual items and start telling them to behave a little bit differently, because the items have a lot of control on layouts, and it just becomes this battle a little bit where you have these two things that are sort of, you're controlling the layout in two different pieces instead of only controlling the layout over here.

[00:05:17]
Which is why for structured layouts, I'd recommend grid for more free flowing layouts, I would recommend using flexbox. We're going to talk more about the two of them as we go through as well.