 It's not morning. Good afternoon. How are you? One year or two for CSS, right? Yeah, lots of good stuff. We've got grid. We've got grid. We can wrap around shapes now even in Firefox or we will in September. We can wrap around shapes. CSS variables. That's my next thing to learn. How many of you are going to mess with that? So what in the Charles River do we need with Flexbox if we've got grid? If you pay attention to one of my favorite people, Jen Simmons, who is the developer and designer advocate at Mozilla, they go together. And absolutely they do. I guess we should back up a minute. Everybody know what Flexbox is? The Flexbox module in CSS. That's what it is because here's what it's not. It is not a plug-in, not an app, not a framework. In fact, I think Flexbox and grid can liberate us from a lot of frameworks. It's part of CSS. Yeah, that's grid. This Flexbox. We use it in one dimension. So like in a phone view or you reach backwards. Oh yeah, grid is for two. Grid is for two dimensions. That's what we're doing here. You know, when you're laying out a grid and you don't necessarily, in both of these can also be used for asymmetry, which is what my degree really is in. You know, it's not in software. It's not in, because there was no software in 1983 when I got out of design school. Grid is for one dimension. So it's great for a phone view. It's great for site inner. Flexbox is good in one dimension. For site inner, if you have no sidebars or for content, if you have sidebars, but you're going in one dimension, or one dimension, Flexbox is made for navigation, which is usually horizontal. In fact, you might say, Flexbox is on the menu. I look that up later. That's not the beef commercial at all. The beef commercial is it's what's for dinner. So that was beef. You've got beans on your chair. And this is what they're for. So you start Flexbox by declaring it's a display property. You know, display block, display inline block. You also do display grid. You do display flex. The next thing you want to declare is, which where are we going? So then you say flex flow row or flex flow column. And the good news is flex flow row is the default. You actually don't have to include it. You just have to include column if you're going the other way, like in that phone view. So how do you control the children? Because you're always writing that on a parent element. You're pretty much done. You write everything almost in this case in the parent element. Let's go back to that navigation. Most of the time you don't have to write anything on the individual list items. You're going to write everything on the UF. Here's that code. I mean obviously not without the styling. Display flex, flex flow row. Justify content goes across. It goes in the same direction we're going. Pick up your needs. Stretch them out this way. When you have flex flow row, this is your justify content. And there are a number of choices you have, like space between, space around, center, et cetera. I'm not going to go through those because if you're using DevTools, you're going to get that whole list of choices and some of you didn't know you had some. I don't know you have, frankly. And you just pick one that seems to work. Justify content goes with the flow. Back to our phone view. Pick up your needs again. Because we go in vertical. Long tube of content in the words of Chris Coyer. There's the code. Flex flow column. Justify content now is going vertically. And the aligned items are on the left. When you're dealing with a column of something and you want them all to line up, that's aligned items. So here we're vertical so justify content goes with the flow. The aligned items goes the other way. In our menu, aligned items is making them in the center. I'm pointing at the menu items. It's in the center vertical of the div that's holding that UL. You don't have to. This is vertical centering, by the way. Do you ever have just one thing that you want to put vertically and horizontally in the middle of a box? A, I have a bunch of designed, just, dead design professors that want to slap you. Second of all, you do it with Flexbox. Aren't we glad they're dead. I've got to say my degree is in asymmetry. So justify content goes with the flow. Whether you've got a row or you've got a column, justify content goes with the flow. Our stuff, as the other part is, align items. Right flow column. Align items lands them up on the left, here in the column. Align items crosses the spine. I could not resist trying to get it to rhyme. Align crosses the spine. Justify content, align items. Bessie, the elephant in the room. Okay, Bessie, what's up? Flexbox only works on direct children. This is a blessing and a curse. Here's a nice grid. You want to do something with Flexbox on it. But are you targeting its direct parent? If you do display flex and nothing else, this is what should happen. Yes, that's the direct child. Whatever you just applied display flex to. Here, let's see. Is the element containing those boxes? The direct parent? I guess it is. So it's a check. And also if you know this, if this isn't happening, you know you've got to look down in those dead tools to find what that direct parent and direct child are to target them properly. So, thank you very much. That's who I am. The give-home thing in the show. There's supposed to be a little give-home icon. I may have given up questions, or was I so terrific and so funny and besides you got beads. Kevin, a very wonderful, I learned grid, and then I would do flex... Oh, I've never had any circumstances in which I would use Flexbox in two dimensions. And there certainly would be if there were before a discovered grid and if you are using something, if you know you've got audience in a browser like ID 11, which doesn't quite do grid yet, or opera, then yes. And the way you get it to go into dimensions is instead of just row or just column, you go row, wrap. Thanks, Kevin, and anybody else. I think I'll call that a K prompt.