CSS Grids and Flexbox for Responsive Web Design Practical Use of Flexbox in a Grid System

[00:00:00]
>> Jen Kramer: And so now the next thing that we wanna move on to is, taking a look at Flexbox as a grid system. Now that we have a sense of what Flexbox is, the kinds of things that are possible with it, let's start to think about Flexbox in terms of a grid system.

[00:00:14] And we don't have to think about this completely from scratch. It's always helpful to look at examples that exist already. I mentioned to you that Bootstrap 4, is written in a Flexbox based grid system now. So you could take a look at that code, the other place you can take a look at is here, this is FlexboxGrid.com.

[00:00:35] And this particular framework has been out for a while. It's just a grid system, so unlike bootstrap, which has tons of other stuff, Javascript and styling and all kinds of things, Flexbox Grid is just basically a layout grid. So here's a place where you can download this code, and you can take a look at the html and CSS, get a sense for how it's put together.

[00:00:57] Which I'm not gonna take the time to do. What I'm gonna show you is basically show you this website, and you can take a look at the kinds of properties here that are possible. And then we can think about how we might implement some of those things with Flexbox.

[00:01:10] And we'll go ahead and write together that same grid system, that we did with earlier with the floats. We're gonna redo that grid system once again, this time using Flexbox. So if you take a look here at the Flexbox Grid website, you'll see here that it has a similar kinds of classes to it from Bootstrap.

[00:01:33] So, call hyphen excess hyphen 12. You know the extra small grid system, extra small grid size that occupies 12 columns, there's a four, a six, an eight. Small, medium, large, so you can take a look at all those types of things. The second chunk down here, called Fluid, notice the way that they are handling their sizing here.

[00:01:56] So we have flex-basis Of 50% for the call hyphen extra small hyphen six class. So again, they're not using width as we talked about before lunch, they're using flex basis to handle width here. In their system and obviously this is a six column wide container. That flex basis property will vary depending on whether it's a one or a 12 column container.

[00:02:25] If you take a look at it's syntax here, you'll see that it is set up basically the same kind of html syntax that, we have with our floats. So we have a row, and inside of that, we have some kind of cells. And we are gonna do a similar kind of thing when we write our grid system here momentarily.

[00:02:43] Because of course the row would be our flex what? Would array our flex container or flex item? So our row would be our flex Container, and then the individual items inside are the flex? Items, correct, so offsets are possible here.
>> Jen Kramer: They don't necessarily show exactly how that's done, but offsets are possible.

[00:03:11] You could dig into that code on your own if you want, the concept of auto-width is a really interesting one. This is actually something else that's in foundation, foundation six's grid system. This is the concept you can specify the width of some of the cells in your flex box row and the rest of it, you can just to auto.

[00:03:32] It will just figure out the space that's left, and divide it up among the number of boxes and so forth, so that's something you can do. There's nested grids here are possible, so you can have well Flexbox grids anyway, Flexbox grids inside of Flexbox grids. Just do remember that you do have to have a parent and a child.

[00:03:52] Okay, the flex box container and the flex item, so that's one way of setting that up. Cool alignment options here, this is related to which Flexbox property that goes on a parent, that would be responsible for these cool kinds of alignments?
>> Jen Kramer: Do we remember?
>> Speaker 2: Justified content.

[00:04:16]
>> Jen Kramer: Justified content, exactly. So justified content, flex start, flex end, center, all those things. So you can implement those here. So in this case we have a cell in our Flexbox layout, and it doesn't occupy the full 12 columns, we can use different types of alignment to push that around inside of its row.

[00:04:41]
>> Jen Kramer: You can do the same kinda thing vertically, so you could have different heights of columns and align them. Maybe you don't always want them aligned to the top, which is often what we actually want with a grid system. Or equal height boxes, but you can lay these out differently using which Flexbox property for the cross axis?

[00:05:00] Justified content is for the main access, which is the cross access equivalent.
>> Speaker 2: [CROSSTALK]
>> Jen Kramer: Align items. And then we can also of course distribute things in different orders, anybody remember the properties, values here for these? This is justify content.
>> Speaker 2: Space around.
>> Jen Kramer: Space around, yeah.
>> Speaker 2: Space between.

[00:05:21]
>> Jen Kramer: Space between, yeah, so see how you can already look at a Flexbox grid system and have a sense of how it's coded, without even reading the code? Okay, they have reordering options, and we do that with what property?
>> Speaker 2: Order one.
>> Jen Kramer: Order property, we just give it some numbers, We can even reverse things in a row, right?

[00:05:42] Okay, so there's lots and lots of options here, for working with Flexbox based Grid system. That weren't necessarily possible with our floats, so notably, things like reversing orders here The re-ordering was possible with floats, but I would argue that we can do it to a way greater extent, with a lot less code with Flexbox, than we did with floats.

[00:06:05] And of course, then we have the interesting spacing options and so forth, that were not possible with floats either