This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Flexbox Justification" Lesson
[00:00:00]
>> Jen Kramer: I usually find when I learn new syntax it's helpful to determine what each little property is doing on its own so that you can think about things more holistically. [COUGH] All right, so then, number 5. We're gonna start to think about how we can put these boxes on the row and how we, the term is called justify content.
[00:00:23] And as I say here, the justify content is determining distribution of the flex items withing the flex container on the main access. So the flex items are the little boxes, on the main access which in our case is row, so horizontally, how are they distributed? Because they don't necessarily take up all of the space, if I go back to my CSS and I set my flex flow to row wrap, okay?
[00:00:52] And not add anything new, what I have here of course are a series of boxes, right? And some of you designers out there are looking at this and like, well we've got all this hanging rag on the end. I guess we'd call that a rag if we were looking at this and it was a paragraph, right?
[00:01:11] What if I don't want a rag like this? What if I wanna distribute the space in between these boxes differently? And that's what justify content is all about. [COUGH] So what we're gonna do here is we'll add justify-content, and there's a bunch of possible values for justify-content, all right?
[00:01:34] So flex-start is the default, so everything's pushed to the left side in those boxes just the way that you just saw. If we said, flex-end, anyone wanna guess what happens with our boxes then?
>> Jen Kramer: What do you think flex-end is going to do? A flex-start lines everything up on the left, what do you think flex-end is gonna do?
[00:01:59]
>> Speaker 2: Align it to the right.
>> Jen Kramer: Line them up on the right, okay? So if we save that, look at that in the browser, there they are lined up on the right, okay? If we said, center, anyone want to guess what center is gonna do?
>> Speaker 2: Put them in the center.
[00:02:18]
>> Jen Kramer: Put them in the center. So if we refresh our page there's all of our nice boxes centered. My gosh, isn't that amazing? We have boxes that are the width of the content and the browser's doing the math for you, aligning them in the center of the page.
[00:02:36] You are not able to do this with any other technology that you have at your finger tips. This is totally awesome and the code was easy, okay? So, this is part of what makes flex-box awesome, all right? Now, comes the one that I find confusing, all right? Because I get confused by the words.
[00:02:56] Space between, space around, and space evenly. So, let's take a look at all of those individually. So space-between
>> Jen Kramer: [COUGH] So what this is gonna do is it's gonna take these boxes, it's gonna shove them all the way to the ends, okay? All the way to the left, all the way to the right.
[00:03:20] It's gonna do the math, how big are the boxes in between? What are they doing? And then it takes whatever space is left over and evenly assigns it in between those remaining boxes. So you see once again, over here all the way over on the left, all the way over on the right, we don't have any margin over there, right?
[00:03:40] We're shoved all the way up against the edge. But in between these boxes we have a space that is the same. And the second row looks like a great big huge honking space because it is, that's just the way our boxes happen to be working in this example.
[00:03:55] If we shrink this down a little bit, we wind up with a slightly different distribution, okay? So that's space-between.
>> Jen Kramer: Space-around,
>> Jen Kramer: Space-around does it this way, okay? So what just happened here? If you take a look at this space here to the left of box 1 and the space in between box 1 and 2, and the space to the right of box 4, that's about half of the space in between box 3 and 4, okay?
[00:04:39] So we're taking a little bit of the space and placing it on the left and the right side of the box where two boxes intersect. You have the right of one box and the left of the other, they come together and form the larger space. Make sense? Okay, so you see how you could easily confuse.
[00:04:58] Personally, I think space-between and space-around but space-around, space on two sides. Space-between, potentially space on one side, all right? And then the last one is space-evenly.
>> Jen Kramer: And if we look at space-evenly, they sort of jerk in a little bit like that. Anyone think they know what's happening here with space-evenly?
[00:05:29]
>> Speaker 3: They're spaced evenly?
>> Jen Kramer: Spaced evenly meaning what?
>> Speaker 4: The same amount of space between them and on the sides.
>> Jen Kramer: Same space between, okay, same between 1 and 2, 2 and 3. And the same between say 4 in the edge, 1 in the edge, okay? So the space here between 5 and the edge, between 5 and 6 and between 6 and the edge that's all the same space, all right?
[00:05:51] So space-evenly. This is the newer property, space-evenly. Space-around and space-between have been around for a while, space-evenly is a relatively new one.