align-content vs align-items

You might have come across align-content as well as align-items while using flex in CSS, both are used for vertically aligning purposes but what exactly is the difference between them?
Here we will try to find the answer with practical code examples.

Difference

align-items is for items in a single row. So for a single row of elements on the main axis, align-items will align these items respective of each other and it will start with a fresh perspective from the next row.

align-content doesn’t interfere with items in a row but with rows itself. Hence, align-content will try to align rows with respect to each other and flex container.

Align-items

Now let’s try to see the effect of various properties of align-items with examples

• The red list is set to flex-start
• The yellow list is set to flex-end
• The blue list is set to center
• The green list is set to baseline
• The pink list is set to stretch

Align-content

Align content has various properties just like align-item, let us see each with example.

NOTE: align-content won’t work if flex-wrap:wrap is not set.

• The red list is set to flex-start
• The yellow list is set to flex-end
• The blue list is set to center
• The green list is set to space-between
• The pink list is set to space-around
• The brown list is set to stretch

References:
– https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items/34944673
– https://css-tricks.com/almanac/properties/a/align-content/
– https://css-tricks.com/almanac/properties/a/align-items/