Flexbox with Display Flex

[00:00:00]
>> Jen Kramer: What I'm gonna do here is I'm gonna try to cover Flexbox in about a half an hour or so, which obviously means I'm gonna cover very little of Flexbox. [LAUGH] I do have a full course on Flexbox here at Front End Masters. If you wanted to look that up on the Front End Masters website it covers Flexbox and Grid, and these are two of the most modern ways of laying out web pages.

[00:00:20]
In the interest, though, of boot camp and trying to keep things compact, and small, and easy, I'm just gonna cover a tiny little bit of Flexbox. So in your notes, if you take a look here, about three quarters of the way down the page, we have the notes here about introducing Flexbox and how this is going to work.

[00:00:39]
And so this is a great way of taking boxes on your web page, and we're going to be able to assemble them into a series of boxes next to each other, and a series of rows going down your page. This is actually the beginning of responsive design. So, the way we're going to go about doing this in that code pen, let me go ahead and fork my own copy.

[00:01:02]
So the way that Flexbox often gets introduced is we use an unordered list. And the reason why is Flexbox is all about parents and children. Okay? Flexbox is all about parents and children. Okay so if we look at our unordered list, what is the parent here?
>> Speaker 2: The unordered list,

[00:01:24]
>> Jen Kramer: The unordered list, the UL tag. And what are the children?
>> Jen Kramer: All right, so the UL is the parent. The LI's are the children. So there's another name that we use for these in Flexbox, we call the parent, we call it the flex container. And we call the children the flex items.

[00:01:44]
Okay, so we have a flex container, and we have individual flex items. All right? And there has to be this relationship of parent and child, they have to be together, one right after the other. You can't separate these in space. We can't have grandparents and grandchildren in Flexbox.

[00:02:02]
That doesn't work. They must be parents and children in order for Flexbox to work, right? Tattoo that on your forehead. They gotta be parents and children. We can't have any of that grandparent thing going on, all right? So here in your notes, you've got some examples of Flexbox and how these things are going to work.

[00:02:25]
And so you can follow along in here with what I'm going to talk about. But the first thing that we'll do here is let's go ahead and make a style for UL. And here in the style for you UL, the very first thing let's do, let's turn off these bullets, cause they're annoying, all right?

[00:02:39]
How do we turn off bullets again? I forgot.
>> Speaker 3: Text decoration.
>> Jen Kramer: Not text decoration. What?
>> Speaker 2: Style or styles.
>> Jen Kramer: List style.
>> Speaker 2: Type.
>> Jen Kramer: Type. It's a joint effort. List, hyphen, style, hyphen, type is set to none, right? And we can go ahead and set our padding to zero, and our margin to zero.

[00:03:09]
Great. So that's not Flexbox, that's just list. So now we have a list of stuff with no bullets. Awesome. Okay, so the very first step in working with Flexbox is to declare that we're working with Flexbox. Okay? So, so far today we've seen the display property in action.

[00:03:29]
We saw display block, we saw display inline, we saw display inline block, and got really confused by that. Here comes your fourth one. We're gonna say what? Display flex.
>> Jen Kramer: And just like that, it goes horizontal.
>> Jen Kramer: That's all we did. Display flex, and immediately it's gonna go horizontal.

[00:03:56]
So to keep track of what we're doing, let's go to our LI and let's put a border on that. Border three pixels, solid blue, just so we can see what we're doing here. So we had our list items, and now we see them. They're going horizontal on the page.