Demystifying alignment in flexbox children

[00:00] The flexbox layout gives us a lot of options for changing the alignment of elements within the flex container. It actually gives us so many options that it's easy to confuse them. Let's demystify them by looking at some examples.

[00:12] Here, I have three articles of different sizes with headlines. I've set the background color of the body to this dark gray so it makes it easier to see the boundaries of the article elements. I've already set display to flex on the container, which in this case is the body tag. I also set the flex direction to column, so the content flows from top to bottom.

[00:31] The first property we'll look at is justify-content. This property affects the way the children are aligned along the direction the content is flowing. Currently, the flex direction is set to column, so justify-content will affect how the articles use the extra space from top to bottom without adjusting the actual size of the elements.

[00:49] Justify-content defaults to flex-start, which means they will all bunch up to the starting point, which, in this case, is the top. If we change it to flex-end, they will bunch together at the bottom. We can also change it to center to get them to bunch together in the middle. This is also a great way to finally get real vertical-align in CSS.

[01:08] If I only had one child or one article, it would still be centered vertically. I can also spread the children out using space-between, which will stick the first child to the start of the flow and the last child to the end, with the children in between spaced out evenly. The last option for justify-content is space-around, which is pretty complex.

[01:28] It distributes the empty space equally around all the children, including the first and last ones, but notice the space before the first child and after the last child is half of the space between children. Justify-content affects the space along the flex direction. Align-items affects the space perpendicular to the flex direction.

[01:49] To illustrate this better, I'm going to change the direction to a row. I'm also going to make all the articles the same width by setting flex to one on all of them. Now we have three articles of different content length, but their box height is the same. They're stretched to 100 percent height.

[02:04] That's because align-items defaults to stretch, which will use all of the extra perpendicular flex direction space, which in this case is the vertical space. We can also set it to flex-start, which will move them to the top. Flex-end will align them to the bottom. Center will move them to the center. This is also another solution for the CSS vertical-align problem.

[02:25] The last option is baseline. This will align the items to the baseline of the first line of text in the element. I can better demonstrate by removing the h1 tag from this last child. Notice how the baseline of the first line of the text lines up with the headlines and the other elements.

[02:47] I can also change one child individually by using the align-self property on one of the children. Align-self is identical to align-items, but you apply it to a flexbox child as a opposed to the container. It defaults to auto, which means do whatever align-items says. If I wanted this not real article to align to the bottom without disturbing the other ones, I could set align-self to flex-end.

[03:11] A quick review. Justify-content declares how to use the extra space along the direction the content is flowing. Align-items declares how to use the extra space perpendicular to the flex direction. Align-self is the same as align-items, but where justify-content and align-items are applied to the flexbox containers and affect all children, align-self is only applied to specific individual children.