Flexbox: align-items and align-content
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.
['Moses Ogwo']
['CSS', 'Align Content', 'Flexbox', 'Align Items', 'Programming']