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

Rachel Andrew

Ab Chrome 123 können Sie die CSS-Eigenschaft „Box-Ausrichtung“ align-content für Block- und Tabellenlayouts verwenden. So können Sie die Blockrichtung ausrichten, ohne ein Flex- oder Rasterlayout erstellen zu müssen. Möglicherweise müssen Sie Ihr CSS jedoch aktualisieren, wenn Sie align-content außerhalb dieser Layoutmethoden verwendet haben, da es jetzt wirksam wird.

Browser Support

• 123
• 123
• 125
• 17.4

align-content in Flex- und Rasterlayouts

Wahrscheinlich haben Sie schon einmal align-content verwendet, um Flex-Elemente oder Rastertracks auszurichten. In einem Flex-Layout wird die Eigenschaft align-content für den Flex-Container verwendet, um die Flex-Elemente auf der Querachse auszurichten. Im folgenden Beispiel hat er den Wert space-between, sodass der verfügbare Platz im Flex-Container auf die Flex-Zeilen verteilt wird.

Die Zeilen der Flex-Elemente werden mit der Eigenschaft align-content verteilt, da der Flex-Container über zusätzlichen Platz in der Querachse verfügt.

Elemente vertikal zentrieren

align-content ist besonders nützlich, um ein Element vertikal in einem Container zu zentrieren. Verwenden Sie dazu display: flex zusammen mit align-content: center. Dadurch wird das Element zu einem Flex-Element und es werden auch andere Standardfunktionen für Flex-Elemente angewendet. Im folgenden Beispiel wird die Überschrift mit align-content: center vertikal zentriert. Dadurch wird der Artikel so verkleinert, dass er zum Inhalt passt. Daher müssen Sie flex-grow: 1 auf den Artikel anwenden.

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

Da align-content für das Blocklayout verfügbar ist, können Sie eine vertikale Ausrichtung erzielen, ohne ein Flex-Layout für die Property erstellen zu müssen. Es sind keine zusätzlichen Properties erforderlich, da das Element weiterhin ein Blockelement bleibt. Die einzige Änderung betrifft die Ausrichtung.

Mit dem Attribut align-content wird die Überschrift vertikal in einem Blockcontainer zentriert (erfordert Chrome 123 oder Safari 17.4 oder höher).

Unterstützung von align-content in Blocklayouts testen

Leider ist es nicht möglich, die Unterstützung von align-content im Blocklayout zu testen. Da align-content schon lange im Flex- und Grid-Layout unterstützt wird, wird bei der Verwendung von Featureabfragen mit @supports immer „wahr“ zurückgegeben. Das ist genau das Gleiche, was bei der gap-Property in Flexbox passiert ist. Die CSS-Arbeitsgruppe erwägt eine Lösung für solche Teilimplementierungen.

Websites auf unerwartete Ausrichtung prüfen

Die align-content-Property ist seit vielen Jahren in der Spezifikation für Blocklayouts definiert. Da align-content außerhalb dieser Kontexte von keinem Browser unterstützt wurde, passierte nichts. Wenn Sie die Property jedoch einem anderen Element als einem Flex- oder Grid-Container hinzugefügt haben, wird sie ab Chrome 123 wirksam. Suchen Sie in Ihrem CSS nach align-content und testen Sie mit der Betaversion Ihre Websites und Anwendungen, um festzustellen, ob dies der Fall ist.