Flexbox: align-items and align-content
A short comparison of the two properties
While I was learning to use Flexbox, I could not easily understand how the align-items property differs from align-content. In this short article, I will explain what I have come to understand about them. First, let’s see what a flex container, flex items, and flex lines are.
Flex Container, Flex Items, and Flex Line
A flex container refers to an HTML element (usually a div) whose CSS display property is set to flex or flex-inline. This element serves as a container for other elements that we seek to align. The elements to be aligned, which are direct children of the flex container are the flex items. Each row or column of flex items in a flex container is a flex line.
Comparison of align-items and align-content
Both function on the same axis
The effect of both align-items and align-content is visible along the cross-axis. I think this similarity contributed to my initial confusion. Both properties function along the cross-axis. Remember that your cross-axis depends on your flex-direction.
If your flex-direction is set to row (which is the default), your cross-axis is the vertical axis. If your flex-direction is set to column, your cross-axis is the horizontal axis.
No wrap, no align-content
The align-content property is relevant only if your flex-container is set to wrap. In other words, unless you have more than one flex line, you do not need the align-content property.
align-items positions flex items within a flex line, along the cross-axis
The align-items property determines how flex items are positioned within a flex line, along the cross-axis. It can have any of the following values:flex-start, flex-end, center, baseline, and stretch. Consider the pen below:
We have a flex container with wrapped flex items. (I have set alternating heights for the flex items to help you visualize their positioning.) Setting align-items to center ensures that our flex items are vertically centralised (that is. along the cross-axis) within each flex line (in this case, each row). To see how the other align-items options work, you can check this reference document.
align-content determines how flex lines are positioned along the cross-axis
The align-content property determines how flex lines (not flex items particularly) are positioned along the cross-axis. It can have any of the following values: flex-start, flex-end, center, space-between, space-around, space-evenly, and stretch. Consider the pen below.
We have the align-content property set to flex-start. This ensures that the flex lines are stacked towards the start of the cross-axis. And because align-items is set to center, each item is centralized vertically (that is, along the cross-axis) within each flex line, even though the flex lines are aligned to the start of the cross-axis. To see how the other align-content options work, you can check this reference document.
Conclusion
The align-content property determines how flex lines are aligned along the cross-axis while the align-items property determines how flex items are aligned within a flex line and along the cross-axis.
I hope that you found this helpful. Thanks for reading.
