Alignment Differences in CSS Flexbox

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:

See the Pen <a href="https://codepen.io/shawnpmitchell/pen/yLOrzMa">Align Items vs Align Content</a> by Shawn P. Mitchell (<a href="https://codepen.io/shawnpmitchell">@shawnpmitchell</a>) on <a href="https://codepen.io">CodePen</a>.