Next, you will learn how to align content and items in your container horizontally and vertically. Such properties include justify-content, align-items, and align-content.
The justify-content property aligns the content in the same direction as they stack (flex-direction). Such values include flex-start, flex-end, center, space-around, and space between. To find out how they work, click here. Here's an example:
This code yields the following result:
The align-items property aligns the content in the direction perpendicular to the one in which they stack. Such values for align-items are the same for justify-content. Here is an example:
This code yields the following result:
When there are multiple lines of content, align-items doesn't work anymore. Instead, you use align-content, which only works for multiple lines of content. Align-content has the same values as align-items. Here is an example:
This code yields the following result:
NOTE: To make sure that the content goes on multiple lines, inside the div{}, set its width. Then, your content may look like it's towards the left. This is because the center value only centers your content within the div class. To center the div, inside div{}, type margin: auto; and width: 50%.