Alignment Differences in CSS Flexbox

The differences between align-content, align-items, and align-self are not clear when starting with CSS flexbox. Hopefully this will help.

Blue bricks perfectly aligned.

When I first started out using the CSS flex property, I had a heck of a time trying to figure out the differences between align-content, align-items, and align-self.

Hopefully the following Codepen example helps to clarify the issue:



Comments

Share your thoughts…