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-start
Items 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-end
You 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-around
You 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.
