The align-items property of flex-box aligns the items inside a flex container along the cross axis just like justify-content does along the main axis. (For the default flex-direction: row the cross axis corresponds to vertical and the main axis corresponds to horizontal. With flex-direction: column those two are interchanged respectively).
Here’s an example of how align-items:center looks:
But align-content is for multi line flexible boxes. It has no effect when items are in a single line. It aligns the whole structure according to its value. Here’s an example for align-content: space-around;:
And here’s how align-content: space-around; with align-items:center looks:
Note the 3rd box and all other boxes in first line change to vertically centered in that line.
Here are some codepen links to play with:
http://codepen.io/asim-coder/pen/MKQWbb
http://codepen.io/asim-coder/pen/WrMNWR
Here’s a super cool pen which shows and lets you play with almost everything in flexbox.