Aligning items on main axis

- [Instructor] Justify-content determines how the flex items are aligned on the main axis. The default value for this is flex start. This means that the content is aligned beginning at the start of the main axis. In this case, that's the left of the horizontal axis. Note that the value is different than Grid. There it is just start. Here it is flex-start. So in container, I am going to add justify-content and then flex dash start and save. And nothing changes because that's the default value.

If we change that to flex-end, save and refresh, the content is all pushed to the end of the main axis. So this isn't changing the order of items to start at the end of the axis like when we had flex direction. It's just changing the alignment so all the items are moved together over to the end. The third option is center. So on line 12, I'm gonna change this to center and save and refresh, and now they're centered. There are three other values, the same as the ones you have in grid.

The next is space between. Space dash between. And save and refresh. And that means that it takes all the extra leftover space and divides it between all of the items. Then the next one we have is space around. And save and refresh. So the space is divided evenly around each of the items. There's five items and it divides the extra space into five portions, but then splits each of those portions in half to go on either side of each item.

So in effect you get twice as much space between each two items as you do at the beginning or end of the container. And finally there's space evenly. Save and refresh. For this it takes all the space and divides it equally into six portions to go around the five items. Now justify-content is based on your main axis, so if you change the main axis by changing the flex direction, your flex-start and flex-end will be based on that.

We're going to change this back to the default of flex-start here on line 12, but we're gonna change the flex-direction to be column-reverse. So I'm gonna change that on the next line, flex-direction column dash reverse. Save. And go over here and refresh. Now that the main axis is going from bottom to top, the alignment is based along that axis. Flex-start means that the items are aligned to the bottom, which is the start of the main axis in this case.

Well, if I change that to flex-end, save and refresh, now they're aligned starting at the top. Now one thing to remember is that the only reason you get any spacing at all here is because we've set the height on the container. If the container didn't have a set height, it would only be as tall as it needed to be to hold the content, so there would be no space. If I go to the code on line 11 and remove the height of the container, and then refresh, now with no space, there's no alignment, so justify-content won't do anything at all.