Flexbox & Grid

[00:00:00]
>> So Flexbox became a CSS module in October of 2017. And its goal was to lay out and distribute space between or around items in a container. And it wanted to do this even if the container had an unknown size, or flexible size. They wanted to be able to resize elements within that flexible container.

[00:00:25]
So to get started, you can set the display property on the container to flex. So now it's a flex container. Now if you're in the slides, there is a link to a CodePen where you can go try this out, but I have slides, so we'll talk through the slides.

[00:00:40]
We're only going to cover some of the flex container properties and some of their values. These are the ones I'm gonna use most often day to day. Of course, if you need more advanced Flexbox properties, I'd recommend checking out there's a great article in CSS tricks that lays out all of the properties for flex.

[00:00:59]
So flex-direction. This establishes the main axis along which items are laid out. It can be row, row- reverse, column or column-reverse. So if you have row, we've got four boxes here. Row is the default. So the blue box is the first box, the purple box is the last defined box.

[00:01:20]
So they're laid out in a row. When we have row reverse, you can see, the items themselves are reversed. So, now the first declared box, the blue one, it's all the way on the right. So they reverse themselves, but they're also on the right side of the container.

[00:01:35]
And that's cuz we're changing the axis. Setting flex-direction to column lays out the items in a column. And as you might expect, column-reverse swaps the direction as well as the order of the items. So that's the first most commonly used flex property on the container. Justify-content defines alignment along the main axis.

[00:02:04]
So these are a few of the properties that can be used, and let's take a look at what that looks like. So this didn't really change much, justify-content flex-start. Now you can see justify-content flex end. This looks like what we just saw, but you'll notice that the first declared box is still on the left.

[00:02:23]
So it's not swapping the order, it's not reversing the order, it's just shifting them to the end of that flex container or justifying them. We can justify items to the center. We can also justify content with space between, so the items are gonna be distributed evenly with the first item on the left, last item on the right.

[00:02:48]
Space around is gonna put just that space around the items. So they're distributed evenly in line with equal space around them. Space-evenly only is pretty similar. It's a little nuanced, but the distance between any two items is equal. So that includes the ends as well, which is different from space around.

[00:03:12]
Admittedly, my screenshots do not do it justice. So [LAUGH] feel free to go play around with the CodePen or look at the CSS Tricks article. Now align items, I always get confused with justify content. So it's hit or miss for me, half the time I define the wrong one.

[00:03:28]
You probably will too, but that's okay. So this defines the behavior for how they are laid out along the cross axis. So if the main axis is going from left to right horizontally, the cross axis is gonna be vertically up and down, perpendicular. So here we've got a larger flex container here.

[00:03:48]
We're aligning our items to the start of the cross-axis here. Now you can see our items when we define that as align-items flex-end now they've moved to the bottom. So it's not left and right anymore, now we're on the cross axis which is up and down.

[00:04:05]
We can align items to the center. We can also stretch our items so that they take up the entire height. Additionally, we can wrap our flex items. So by default, flex items are all gonna try to fit onto one line. But we can change this and we can allow items to wrap as needed.

[00:04:24]
We'll see this with the speakers page later. So when our flex container is too small, you can see our items have squished their width to fit onto one line. If we say, flex-wrap, set it to wrap. Well, now you can see our items are maintaining their predefined width.

[00:04:47]
And since there's not enough space horizontally, the last one is gonna jump down to a new line. And then there's also wrap-reverse. So the full line will be at the bottom and that when it wraps it'll wrap above. I don't know what use case you might have for this.

[00:05:06]
I'm sure there is one. I couldn't tell you, but it is possible to do it [LAUGH]. So whereas Flexbox is one dimensional, grid is a two dimensional layout tool. So this was shipped to browsers in March of 2017. And we define grid the same way that we define flex with the display property.

[00:05:34]
So display grid. So here's a mockup of a two-dimensional layout that might benefit from using a grid as it's two. Yeah, like I said, it's two dimensional and there's always this argument of should use flex box or grid. And the answer is, it depends [LAUGH]. Both, you can use them together, and you should use them together, and we'll see how to do that in practice.

[00:05:56]
But grid is meant for two-dimensional, like this, and flexbox is meant for one-dimensional, like maybe a navigation, which is what we'll use it for. So we define grid template columns. This looks very scientific here, but we'll actually draw this out with diagrams. So this is our maker from two slides ago, we've got our nav, that spans the whole top, we've got an aside, a main, and a footer.

[00:06:24]
So the aside is gonna have, let's say, a fixed width of 180 pixels. I've made these numbers up for the sake of this example. And then we're saying, okay, well, we want the main content and the footer just to take up one fraction of whatever the available space left over is.

[00:06:40]
So just take up the remaining space. So we can declare that using this grid template columns property. So we're saying we want two columns here. The first is 180 pixels fixed. The second one, just take up the remaining available space.
>> Can we use percentage with it?
>> Yes, you can use percentage.

[00:07:02]
Absolutely, yeah. In terms of rows, we've got three rows here. We've got our nav, our aside and main and our footer. Where our footer sits. So the nav will have a fixed height of 80 pixels, our footer will be a fixed height of 100 pixels, and whatever's in the middle just take up the remaining space.

[00:07:26]
So that's how we [LAUGH] define that in English terms. We're gonna find our rows essentially the same way as the columns. We said we want three rows. The first is 80 pixels, the middle one is whatever the remaining space is and the last one is 100 pixels. Now this is terrible to read in English terms, right?

[00:07:48]
Because what we're doing now is we're taking these four areas, nav, aside, main, and footer, and we're defining a grid area for each of these sections. We're saying, I want nav to take up this grid area 1 / 1 / 2 / 3. So it spans the first row, I'm confusing my own self now.

[00:08:14]
We're defining this grid area. You know what? We're gonna do this together. Let's look up grid area. Not beautiful to read, that's why I'm confusing myself here, right? It's a shorthand. It specifies the start location and size of a grid item in the layout. So these four values correspond to grid row start, grid column start, grid row end, and grid column end.

[00:08:36]
That's a lot, right? So now we're saying start at grid row 1 and grid column 1, and span to grid row 2 and grid column 3. My point is, this is not fun to work with, right? But there is an easier way, [LAUGH] thankfully. So the easier way's to define grid areas and give them labels.

[00:09:01]
So these are more semantics. So we're saying, top left quadrant here. We want this to be nav, next column, same row to be also nav. Moving down to row two. We have an aside and we have main. And then on the bottom, the last row we've got aside and column one, footer and column two.

[00:09:19]
This is much more semantic. When I get designs, I literally will sit there with line paper and write this out because it makes way more sense to me. And luckily, we can define these in English terms using grid-template-areas. So this is much more semantic. And now, instead of defining those [LAUGH] four integers, we can say, assign yourself to grid-area of nav.

[00:09:44]
Assign yourself to grid-area of main. Much more fun to work with. So this is what our layout will look like. And I've created a CodePen where you can go physically play around with this if I just confuse the daylight out of you. So feel free to check that out but of course, this is not like CSS grid or Flexbox in depth.

[00:10:03]
There are courses that I'll link to and you can check those out. But we'll see in practice how to make this work.
>> Yeah, we have both CSS Grid and Flexbox course by Jen and then a practical CSS layouts course which covers.
>> Absolutely, I think I linked them in the resources as well.

[00:10:23]
So check out those courses by Jen on front-end masters. Look at that, I literally have a screenshot for you Mark, look at that, CSS Grid and Flexbox for Responsive Web Design, I can recommend this, yes.