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

Rachel Andrew

Ab Chrome 123 können Sie die Eigenschaft align-content aus der CSS-Box-Ausrichtung für Block- und Tabellenlayouts verwenden. So können Sie die Ausrichtung der Blockrichtung anpassen, 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

Sie haben align-content wahrscheinlich verwendet, um Flex-Elemente oder Grid-Tracks auszurichten. In einem Flex-Layout wird das Attribut align-content für den Flex-Container verwendet, um die Flex-Elemente auf der Querachse auszurichten. Im folgenden Beispiel hat sie den Wert space-between. Der verfügbare Platz im Flex-Container wird also zwischen den Flex-Zeilen aufgeteilt.

Mit der align-content-Eigenschaft werden die Zeilen der Flex-Elemente verteilt, da der Flex-Container auf der Querachse über freien Platz 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 greifen auch andere Standardverhaltensweisen für Flex-Elemente. Im folgenden Beispiel wird die Überschrift mit align-content: center vertikal zentriert. Dadurch wird das Element verkleinert, damit der Inhalt hineinpasst. Daher müssen Sie flex-grow: 1 auf das Element anwenden.

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

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

Mit der align-content-Eigenschaft wird die Überschrift vertikal in einem Blockcontainer zentriert. Dazu ist Chrome 123 oder Safari 17.4 oder höher erforderlich.

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 Feature-Abfragen mit @supports immer „true“ zurückgegeben. Das ist dieselbe Situation wie bei der gap-Property in Flexbox. Die CSS Working Group arbeitet an einer Lösung für Teilimplementierungen wie diese.

Websites auf unerwartete Ausrichtung prüfen

Die align-content-Property ist seit vielen Jahren in der Spezifikation als „Arbeiten an Blocklayouts“ definiert. Da kein Browser align-content außerhalb dieser Kontexte unterstützt, wurde nichts ausgeführt. Wenn Sie die Property jedoch einem Element hinzugefügt haben, das kein Flex- oder Grid-Container ist, wirkt sie sich erst ab Chrome 123 aus. Suchen Sie in Ihrem CSS nach der Verwendung von align-content und testen Sie Ihre Websites und Anwendungen mit der Betaversion, wenn dies bei Ihnen der Fall sein sollte.