Het is belangrijk om op te merken dat align-content is een eigenschap in CSS die wordt gebruikt om de uitlijning van de rijen in een flexbox-container te bepalen, maar deze eigenschap heeft alleen effect als er meerdere rijen zijn (wanneer de flex-wrap eigenschap is ingesteld op “wrap”).
De align-content-eigenschap kan een van de volgende waarden hebben:
flex-start: De rijen worden uitgelijnd aan de start van de flexbox-container.
flex-end: De rijen worden uitgelijnd aan het einde van de flexbox-container.
center: De rijen worden gecentreerd in de flexbox-container.
space-between: De rijen worden gelijkmatig verdeeld over de hoogte van de flexbox-container, waarbij de eerste rij aan de bovenkant wordt uitgelijnd en de laatste rij aan de onderkant.
space-around: De rijen worden gelijkmatig verdeeld over de hoogte van de flexbox-container, met gelijke ruimte aan de boven- en onderkant van elke rij.
space-evenly: De rijen worden gelijkmatig verdeeld over de hoogte van de flexbox-container, inclusief gelijke ruimte aan de boven- en onderkant van de eerste en laatste rij.
De align-content-eigenschap wordt gebruikt in combinatie met de flex-wrap-eigenschap om de manier te bepalen waarop flexibele items in meerdere rijen worden weergegeven wanneer ze de beschikbare ruimte in de flexbox-container overschrijden. Het is vooral handig wanneer je flexbox-items in meerdere rijen wilt organiseren en hun uitlijning wilt beheren.
