align-content

In the following image, you can see the lines in the flex container and if you want to align these lines around the cross-axis when there is enough space to move, you can use the align-content property.

This is similar to justify-content as described above.

There should be more than one line to be effective on this align-content property.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Now we will see the property values align-content in detail.

align-content:flex-startItems are placed at the start of the container but this follows the flex-direction. When you look at the above image you can understand how the lines are placed inside the container.

align-content:flex-endYou can see the difference between flex-start and flex-end to understand how the items are packed. Here items are packed to the end of the container. This also follows the flex-direction

align-content:center Items are centered inside the container

align-content:space-between Items are distributed in such a way that the first line is at the top edge of the container and the last row is at the bottom edge of the container. Rows in the middle are evenly distributed

align-content:space-aroundYou can find evenly distributed space around each line

align-content:space-evenly I am not sure about this and I have to check with an example

align-content:stretch This is the default value for the align-content and lines will stretch to take up the remaining space.