Where to use Flexbox

[00:00:00]
>> So we are moving on then to chapter 11. And in chapter 11, we go back to our old friend Flexbox. Phew, everybody says, thank goodness, something that I kinda know something about. So now that you know what Grid does, all the amazing things that it does, what does that leave for Flexbox to do?

[00:00:20]
Great question. Let's take a look. So if Grid is gonna do all this amazing work for us, where should we be using Flexbox? So, I thought a lot about this question. And what I have come up with are these, particularly these items as guidance. So first of all, a series of boxes that are not the same size.

[00:00:42]
So remember with Grid in, even though we can make Grid like different sizes, those were different sizes all the way down the page, right? So Henry, if we said two fr, one fr it was gonna be a fat column on the left all the way down the page.

[00:00:56]
With Flexbox, we can literally have a different size for everything single item that we are working with. Can anyone think of a structure on a page where we routinely have a bunch of boxes that have different sizes? File, that one away, yeah?
>> Google Photos has all these different size and different ratio and asset ratio.

[00:01:15]
>> There you go, that might be something where Flexbox would be good. That would be great. There's another answer. It's almost on almost every web page. I'll tell you in a minute. A series of boxes that are not in an even size grid. So somebody asked yesterday, what would happen if I want three cards across, and then I want two cards lined up underneath those three cards?

[00:01:36]
Not possible with Grid. Grid is designed to be a grid, [LAUGH] and that is not a grid. So you need Flexbox in order to achieve that kind of layout. And I think another thing that we should consider is that when the same space between elements is really important, but not the same width of each element in our particular layout.

[00:01:56]
So Flexbox can keep that same space no matter how wide or narrow each one of those boxes are, that would also describe one of these common UI elements. And then remember that Flexbox is it's in the name. It wasn't designed to be locked down for layouts. They're supposed to be flexible boxes, right?

[00:02:17]
Not really designed to be locked down. So we have done a lot of hacking with Flexbox through via Bootstrap and Tailwind and all the rest of those, and we've even done our own hacking. If you look at previous versions of this course, I have done that very hacking in order to achieve those layouts, but that was back before Grid was widely supported by all of the browsers.

[00:02:37]
So here's some examples of what I was just talking about. So here's a series of boxes that are not the same size, but the space between is important because it looks weird when the space is not the same between. I put a little border around each of these items here and something that looks like a nav bar, so that you can kind of see the space in between those items is pretty much the same.

[00:02:59]
And clearly the space are the widths for each one of those items is different, right? So nav bar is great place to use Flexbox, okay? Here's an example of a series of boxes that are not in an even kind of Grid. We wanna have three on the top, we wanna have two on the bottom.

[00:03:15]
This is what that kind of layout would look like and Flexbox is really good at this, okay? And so these are gonna be the two examples that we're going to work through next, how do we make that? [LAUGH] And how do we make a navbar using Flexbox? Which by the way, very cool, we can of course change its layout across media queries as well, so we're gonna look at that too.

[00:03:39]
There are a whole series of Flexbox properties. Notice there are actually fewer here than there were with Grid. Please also pay attention to the link at the bottom, which is CSS tricks link to all of the Flexbox properties. And again, we know CSS tricks is not being updated on a regular basis, but Flexbox doesn't really have much of anything new either.

[00:04:02]
So this is still a really great reference to use. And then finally, you can have your Flexbox Froggy. Remember that these games are gonna teach you more about properties and values. They really don't teach you how to think about the problems when it comes to laying out web pages.

[00:04:19]
So a lot of people online will tell you if you wanna learn Flexbox, just go play that Flexbox Froggy, and it is true you will learn like justify content and you'll learn display flex and all those kinds of things. But you're not gonna learn like how do I think about the actual problem that I'm trying to solve?

[00:04:37]
So Flexbox Froggy, Flexbox Defense, and Flexbox Adventure, great places to go, super fun, learn some properties and values.