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

Rachel Andreas

Vanaf Chrome 123 kunt u de eigenschap align-content van CSS Box Alignment gebruiken voor blok- en tabellay-outs. Hierdoor is uitlijning van de blokrichting mogelijk zonder dat er een flex- of rasterindeling hoeft te worden gemaakt. Het is echter mogelijk dat u uw CSS moet bijwerken als u align-content buiten deze lay-outmethoden heeft gebruikt, aangezien dit nu van kracht wordt.

Browser Support

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

align-content in flex- en grid-indelingen

U hebt waarschijnlijk align-content gebruikt om flexitems of gridtracks uit te lijnen. In een flex-indeling 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 het de waarde space-between , zodat de beschikbare ruimte in de flexcontainer wordt verdeeld over de flexrijen.

De eigenschap align-content spreidt de rijen met flex-items uit, omdat de flex-container vrije ruimte heeft in de dwarsas.

Centreer een item verticaal

Waar align-content bijzonder nuttig is, is het verticaal centreren van een item binnen een container. Om dit te bereiken, gebruikt u display: flex samen met align-content: center . Hierdoor wordt het artikel een flexartikel en wordt ook ander standaardgedrag van het flexartikel van kracht. In het volgende voorbeeld is de kop verticaal gecentreerd met align-content: center , dit zorgt ervoor dat het item kleiner wordt om bij de inhoud te passen, en daarom moet je flex-grow: 1 op het item toepassen.

De eigenschap align-content centreert de kop verticaal binnen een flexcontainer.

Omdat er align-content beschikbaar is voor de blokindeling, kunt u verticale uitlijning bereiken zonder dat u een flexibele indeling hoeft te maken om de woning te laten werken. Er zijn geen aanvullende eigenschappen nodig omdat het item een ​​blokitem blijft, de enige verandering betreft de uitlijning.

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

Test voor ondersteuning van align-content in bloklay-outs

Helaas is het niet mogelijk om te testen op ondersteuning van align-content in bloklay-out. Omdat align-content al lange tijd wordt ondersteund in flex- en grid-indeling, zal het gebruik van functiequery's met @supports altijd true retourneren. Dit is dezelfde situatie die zich voordeed met de gap eigenschap in flexbox. De CSS Working Group onderzoekt een oplossing voor dit soort deelimplementaties .

Controleer uw sites op onverwachte uitlijning

De eigenschap align-content wordt al jaren in de specificatie gedefinieerd als werkend voor bloklay-outs. Omdat geen enkele browser align-content buiten deze contexten ondersteunde, deed het niets. Als u de eigenschap echter heeft toegevoegd aan iets dat geen flex- of grid-container is, begint dit effect te hebben vanaf Chrome 123. Zoek in uw CSS naar gebruik van align-content en gebruik de bèta om uw sites en applicaties te testen als dit voor u het geval zou kunnen zijn.