Check out a free preview of the full CSS In-Depth, v2 course:
The "Goal of Flexbox and Demos" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Previously difficult problems like lining up column heights or changing the structural position of elements become easy with Flexbox.

Get Unlimited Access Now

Transcript from the "Goal of Flexbox and Demos" Lesson

[00:00:02]
>> Estelle Weyl: The thing is with Flexbox, what was really complex became super easy cuz these three columns are all lined up. And that on the bottom, body div, display flex, div div flex one, is all I needed to do and then I could do div,
>> Estelle Weyl: div last of type.

[00:00:30] This is not gonna work either because I'm quoting live and,
>> Estelle Weyl: flex: 2 and then you can make it twice as big. Like that, right? Or you could just get rid of flex: 1 altogether. And they can all be the exact same height. So you either make them all the same width.

[00:00:52] Or all the same height. Like all the content. Each one is two to three lines, right? That's how easy Flex Box is. And if you're looking at this going how did she just do that, don't worry, we'll cover it. So let me show you some examples of some flex.

[00:01:09] So this is what I call a power grid which has nothing is lined up in terms of the navigation of the bottom so grid is not the best solution for this. But so flex box is I think but some people would disagree with me. But we have both.

[00:01:27] We'll cover grid next after flex box. No, we cover tables and then grid. So in these three examples, you have unicorns cuz you need to have kittens and unicorns. We've done the kittens, now, we've done the unicorns. And these are actually unicorns. These are animals with only one horn.

[00:01:44] Very unique. If you drink their blood, you have a half life. So if you notice that all the images are the same height and no matter what the size of the paragraph is, the buttons are all in the bottom. And we can learn how to do that in just a few lines.

[00:02:03] And then the navigational elements, they're all the same size. And the footer is on the bottom, and the navigation is on top. But if you switch to having a way narrower screen, without changing the HTML at all we have a navigation on the bottom. And without the lines.

[00:02:28] So you see how we can change a layout without changing our HTML. I moved the navigation from the top to the bottom. And then I did this site which has cats or kittens. Cuz kittens are important. And at the bottom, this was a little hackish but I'm gonna open this up in a new window.

[00:02:52] And then I'm gonna resize this. And as you can see the cats get down to about 200 pixels? And then one pops up and we then we go down and it pops up. And at the bottom, it's nicely lined up. So the popping of, it basically says, it's 300 pixels, it's 200 pixels to 300 pixels and once you get bigger than 300 pixels, pop down.

[00:03:19] That's default flex box, that's what makes flex box really easy. This line, you see as much shorter than the next line, which is the default for flex box. Which some people don't want, they don't want everything the same height. And for that we have grid. And then this being empty, that is not the default for flex, I used a hack.

[00:03:40] And I'm gonna show you the hack at the end. But that's usually why people would want a grid, but you can do all of these things. So, let's go back into Flex Box and show you a few more features. Here we have a sticky header and a sticky footer.

[00:03:55] So if you see the part in the middle, and we don't need to know how tall our page is. It will always have a sticky header and a sticky footer. For usability reasons, you actually never want to have both the sticky header and a sticky footer. You can have a sticky header or a sticky footer but don't do both because if I was on a mobile device in landscape mode, I would have two centimeters of legible text.

[00:04:21] So bad idea but I did wanna show you that it was possible.
>> Estelle Weyl: And then you can have inline. Don't ever do this because it's one big button with the label and a button input on the inside. It's just to show you that you can do it. But don't ever do value stability like this.

[00:04:39] But basically, if this were a button that you could click on. Where would you click on the button if you wanna submit the button without actually checking it? Right, but this is the kind of trick that bad user experience designers do. And there are actually good user experience designers working for bad companies, where they want you to select something you don't actually want to select.

[00:04:57] So here I have three elements in less than 100% width. It says display: inline-flex. If I had said display flex it would take up the whole page, right?
>> Estelle Weyl: And it's the width of the small section on the right is 140 pixels so that was just to make it narrow.

[00:05:18] If I didn't have that, it would take up much more room.