Flex Justify Content

[00:00:00]
>> Jen Kramer: The other thing that we can do with the flex property is this other property called justify content. So do you want all of these boxes pushed to the beginning, which is called flex-start, or push all the boxes to the end, it's called flex-end? Do we want to center these boxes or do we want to distribute some space in between them?

[00:00:21]
And so there's some properties for that. So right now based on the descriptions that you see here, what's going on? What is the default property of that, of this justified content property? What is the default?
>> Class: Start.
>> Jen Kramer: Flex-start, okay. So if we type in here justify content,

[00:00:45]
>> Jen Kramer: Flex-start, absolutely nothing changes, well done, okay. Cuz it's gonna shove all the boxes to the beginning of the row. So let's change it to flex-end
>> Jen Kramer: Cool, all the boxes are now at the other end, right.
>> Jen Kramer: If I change this to center,
>> Jen Kramer: Hey, they're in the center.

[00:01:22]
>> Jen Kramer: You all look really excited by this. Okay, and then the last one that I gave you was space-around. There's a couple of other values, you can look up what the other values are. But I've tried to give you just a few. Space-around, so that's actually gonna divide it into boxes with some space in between them.

[00:01:43]
And there are some things here that are really important to notice, okay. Look a the space between say boxes number three and four and the space between one and the edge of the page. What can you tell me about the space between three and four and the space between one and the edge of the page?

[00:02:01]
So what's the distribution of space here? Take a look at the distance between whatever, two and three, three and four versus one and the edge of the page or seven and the edge of the page.
>> Student2: Twice as much between two items as it is on the ends.

[00:02:15]
>> Jen Kramer: Exactly, there's twice as much between three and four as opposed to the ends of the page. So what the browser did is it took all of the space that was there. It said how many boxes do I have? And I'm going to divide up my space such that I'll put the same amount of space on the left and the right side of each one of these boxes.

[00:02:33]
So you see how you get to those units between the boxes but only one on the ends.