Flexbox Grid System Solution

[00:00:00]
>> What I'd like to do now is go through the solution to the exercise that I just gave you so I'm looking at the code pen that's called to 2c-end and I've talked through my solution here so let me just scrunch up this window and show you what I have here in terms of code.

[00:00:17]
So I just wrapped a row around these five figures you actually didn't need to add any additional classes to this or anything but you do need to have of course the parents and the children that containers in the items, you've got to have both of those things together in order for Flexbox to work.

[00:00:36]
So having five figures there on the page is lovely. But that doesn't help you. With Flexbox. You've got to wrap something around it. So that's what we did with the HTML. And then here in the CSS well, I'll start, start at the top. So we're in our class of row display of Flex, flex flow row wrap, justify content of space evenly.

[00:01:03]
That's so that these boxes are spaced evenly. Very nicely here across the bottom just like that. And I align the content in the center. Okay, with a gap of 2%, and I put in the minimum height of 100 VH viewport units, and that is so that when we went to the desktop dimension, we had that ability for all those things to go down to the bottom.

[00:01:28]
And we had the room to work to stack things on top of each other here. At that tablet dimensions. Okay, so then here at tablet dimensions I just set my flex-basis to 32%. About a third of the screen here for everything and the gap of 2% and again, you can do the math to figure that part out.

[00:01:53]
So then when you go into your media queries you to ask yourself what changes. So what changes as I move across from small screen to big screen generally speaking, it could also be from big screen to small screen, but what is changing and those are the things we need to reset so we don't have to completely reset our declarations over and over and over again.

[00:02:16]
So in other words I don't have to say display flex again inside of my desktop media query. I can just say this, I wanna change my justify content from space evenly at my tablet media query, I wanna change it to justify content of center when I get to the larger screen, my align content which is center here, okay, that gives us this cool center sort of effect.

[00:02:43]
I'm going to change that instead to flex end at those larger dimensions. So everything is stacking up here at the bottom of my screen. In this particular case, everything packs down here at the bottom and then the gap. I read declared the gap. I didn't actually have to do that, but I read declared the gap of 2%.

[00:03:06]
And then I set up my figure width here to be a flexspaces of 18.4%. If you have a gap of 2% and you're working with centered content here in order to space things all out do the math that was the number that I came up with okay so you just type it in whatever the number happens to be.

[00:03:26]
So that's how you could get a crazy thing like this to happen now one of the cool things about this particular layout is this is a kind of layout that was just not possible inside of grid. So, the fact that we have these five boxes and that they're centered here very nicely on the webpage especially at tablet dimensions that's not something that you can do with grid it is something that is unique to Flexbox.

[00:03:53]
>> Could you use the calc function within flex basis?
>> Sure, yes, absolutely. You can use the calc function. So I have a course here front end masters called advanced CSS layouts. And in that course I walk through a whole lot of Calc and CSS variable stuff, to to do all kinds of different, wild and crazy things with page layouts.

[00:04:15]
You could absolutely use Calc and variables in anything that I'm doing here today. I've chosen not to use them in this particular course because this is more oriented towards beginning or beginners or people who are focusing maybe on HTML and CSS for the first time. I know a lot of you are learning JavaScript first, and you're coming back and, and learning HTML and CSS after the fact.

[00:04:37]
So to try to keep my examples as straightforward and easy to read as possible I've kept Calc and variables out of it but if you're interested in learning more about how you can do that if you if you're not sure about how to do that you can watch my advanced CSS layouts course here at Frontend Masters