In the part1 and part2 of these article series we learnt about align-items and justify-content properties. In this part we will finish off with align-content property which is a useful one when we have flex items with more than one line of items.
The align-content property
We can get advantage of this property only when we have more wrapped items inside or flex container. It aligns items in the cross axis using the same values as justify-content property.
In a row flex direction
As e can clearly see align-content does what align-items does as for functionality. They both do alignment in cross axis. But the difference is align-items applies the value to the items individually and align-content applies it to them as a flex content. Meaning it aligns the whole content as per the value.
It is also similar to justify-content as per the values. They bot have exact values. And the difference is the axis that they align the flex container items in. Main axis for justify-content and cross axis for align-content.
In a column flex direction
Just like the other two properties it works in both flex direction. In a column flex container the cross axis is horizontal. Which is the direction this property aligns the flex content alongside it:
All the same as in a row flex direction but in a different axis:
Clearly this is perfect for wen we have a few lines of flex items and need to perfectly align them with various options that we get.
In these series we learnt about align-items , justify-content and align-content properties which if ew use FlexBox we will most likely need to use them. Therefore we should solemnly understand them. Hope these articles help in that case.
Thank you for reading.