Ondersteuning voor het uitlijnen van inhoud in blok- en tabellay-outs

Rachel Andrew

Vanaf Chrome 123 kun je de eigenschap align-content van CSS Box Alignment gebruiken voor blok- en tabelindelingen. Hiermee kun je blokken in de juiste richting uitlijnen zonder een flex- of grid-indeling te hoeven maken. Je moet echter mogelijk je CSS bijwerken als je align-content buiten deze indelingsmethoden hebt gebruikt, omdat de wijziging nu van kracht wordt.

Browser Support

  • Chrome: 123.
  • Rand: 123.
  • Firefox: 125.
  • Safari: 17.4.

align-content in flex- en grid-layouts

Je hebt waarschijnlijk al eens align-content gebruikt om flex-items of grid-tracks uit te lijnen. In een flex-layout wordt de eigenschap align-content gebruikt op de flex-container om de flex-items op de dwarsas uit te lijnen. In het volgende voorbeeld heeft deze de waarde ` space-between , waardoor de beschikbare ruimte in de flex-container tussen de flex-rijen wordt verdeeld.

De eigenschap align-content zorgt ervoor dat de rijen van flex-items verder uit elkaar staan, omdat de flex-container extra ruimte heeft in de dwarsrichting.

Centreer een item verticaal

align-content is met name handig om een ​​item verticaal te centreren binnen een container. Gebruik hiervoor display: flex in combinatie met align-content: center . Hierdoor wordt het item een ​​flex-item en treedt ook het standaardgedrag van flex-items in werking. In het volgende voorbeeld is de kop verticaal gecentreerd met align-content: center . Hierdoor krimpt het item om de inhoud te passen, en moet je flex-grow: 1 op het item toepassen.

De eigenschap align-content centreert de koptekst verticaal binnen een flexbox.

Met align-content beschikbaar voor bloklay-outs kunt u verticale uitlijning bereiken zonder dat u een flexibele lay-out hoeft te maken. Er zijn geen extra eigenschappen nodig, aangezien het item een ​​blokitem blijft; de enige wijziging betreft de uitlijning.

De eigenschap align-content centreert de kop verticaal binnen een blokcontainer (vereist Chrome 123 of Safari 17.4 of hoger).

Test of align-content wordt ondersteund in bloklay-outs.

Helaas is het niet mogelijk om te testen of ` align-content wordt ondersteund in een bloklay-out. Omdat align-content al lange tijd wordt ondersteund in flex- en gridlay-outs, zal het gebruik van feature queries met @supports altijd `true` retourneren. Dit is dezelfde situatie als met de gap eigenschap in flexbox. De CSS Working Group onderzoekt een oplossing voor gedeeltelijke implementaties zoals deze .

Controleer uw sites op onverwachte uitlijning.

De eigenschap align-content is al jaren in de specificatie gedefinieerd als werkend op bloklay-outs. Omdat geen enkele browser align-content buiten deze contexten ondersteunde, had deze geen effect. Als je de eigenschap echter hebt toegevoegd aan iets dat geen flex- of gridcontainer is, begint deze vanaf Chrome 123 wel effect te hebben. Controleer je CSS op het gebruik van align-content en gebruik de bètaversie om je websites en applicaties te testen als dit mogelijk ook voor jou geldt.