Unterstützung für das Ausrichten von Inhalten in Block- und Tabellenlayouts

Rachel Andrew

In Chrome 123 können Sie die Eigenschaft align-content der CSS-Feldausrichtung für Block- und Tabellenlayouts verwenden. Dies ermöglicht die Ausrichtung in Blockrichtung, ohne ein flexibles oder Rasterlayout erstellen zu müssen. Möglicherweise müssen Sie Ihr CSS aktualisieren, wenn Sie align-content außerhalb dieser Layoutmethoden verwendet haben, da dies jetzt wirksam wird.

Unterstützte Browser

  • 123
  • 123
  • 125
  • 17,4

align-content im Flex- und Rasterlayout

Wahrscheinlich haben Sie align-content verwendet, um flexible Elemente oder Rasterspuren auszurichten. In einem flexiblen Layout wird die Eigenschaft align-content für den flexiblen Container verwendet, um die flexiblen Elemente an der Kreuzachse auszurichten. Im folgenden Beispiel hat er den Wert space-between. Damit wird der verfügbare Speicherplatz im Flex-Container auf die flexiblen Zeilen verteilt.

Das Attribut align-content verteilt die Zeilen der flexiblen Elemente, da der flexible Container auf der Kreuzachse einen Reserveraum hat.

Element vertikal zentrieren

Besonders nützlich ist align-content dabei, ein Element in einem Container vertikal zu zentrieren. Verwenden Sie dazu display: flex zusammen mit align-content: center. Dadurch wird das Element zu einem flexiblen Element. Außerdem werden andere Standardverhalten der flexiblen Elemente wirksam. Im folgenden Beispiel ist die Überschrift vertikal mit align-content: center zentriert. Dadurch wird das Element verkleinert, damit es an den Inhalt passt. Daher müssen Sie flex-grow: 1 auf das Element anwenden.

Mit dem Attribut align-content wird die Überschrift in einem flexiblen Container vertikal zentriert.

Wenn align-content für das Blocklayout verfügbar ist, können Sie eine vertikale Ausrichtung erzielen, ohne ein flexibles Layout erstellen zu müssen, damit die Property funktioniert. Es sind keine zusätzlichen Eigenschaften erforderlich, da das Element ein Blockelement bleibt. Es ändert sich nur die Ausrichtung.

Die Property align-content zentriert die Überschrift in einem Blockcontainer vertikal. Dazu ist Chrome 123 oder Safari 17.4 oder höher erforderlich.

Test zur Unterstützung von align-content in Blocklayouts

Es ist nicht möglich, zu testen, ob align-content im Blocklayout unterstützt wird. Da align-content schon lange im flexiblen und Rasterlayout unterstützt wird, wird bei Featureabfragen mit @supports immer „true“ zurückgegeben. Dies ist dieselbe Situation wie bei der Eigenschaft gap in der Flexbox. Die CSS-Arbeitsgruppe untersucht eine Lösung für Teilimplementierungen wie diese.

Websites auf unerwartete Übereinstimmungen prüfen

Die Eigenschaft align-content ist in der Spezifikation schon seit vielen Jahren für Blocklayouts definiert. Da align-content außerhalb dieser Kontexte von keinem Browser unterstützt wird, hat er keine Wirkung erzielt. Wenn Sie die Eigenschaft jedoch einem Element hinzugefügt haben, das kein Flex- oder Rastercontainer ist, wird sie ab Chrome 123 wirksam. Suchen Sie in Ihrem CSS nach align-content und testen Sie Ihre Websites und Anwendungen mit der Betaversion, falls das bei Ihnen der Fall sein könnte.