What is the difference between aligning content and aligning items?

Question

What is the difference between

align-items and align-content?

Answer 1

The

align-items property of flex-box aligns items within a Flex container along the horizontal axis, just like justify-content aligns along the main axis. (With the default flex-direction: row, the cross axis corresponds to the vertical direction and the main axis corresponds to the horizontal direction. When using flex-direction: column, these two axes can be aligned with each other separately. Change).

The following is an example of what align-items:center looks like:

But align-content works for multi-line flexboxes. It has no effect when the items are in a row. It aligns the entire structure according to its value. Here is an example of align-content: space-around;:

This is what align-content: space-around; looks like with align-items:center:

Notice that the third box in the first row and all other boxes change to be vertically centered in that row.

Here are some codepen links you can use:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

This is a super cool pen that displays and allows you to use almost anything in Flexbox.