Box-Alignment im Mehrspalten-Layout
Das CSS-Box-Alignment-Modul beschreibt, wie Ausrichtung in verschiedenen Layout-Methoden funktioniert; in diesem Leitfaden erkunden wir, wie Box-Alignment im Kontext des Mehrspalten-Layouts funktioniert. Da dieser Leitfaden darauf abzielt, Dinge zu detaillieren, die für beide Module spezifisch sind, sollte er in Verbindung mit dem Box-Alignment-Überblick-Leitfaden gelesen werden, der die gemeinsamen Merkmale der Box-Ausrichtung über Layout-Methoden hinweg beschreibt.
Im Mehrspalten-Layout ist der Ausrichtungscontainer die Inhaltsbox des Mehrspalten-Containers. Das Ausrichtungsobjekt ist die Spalten-Box. Die Eigenschaften, die auf Mehrspalten-Layouts angewendet werden, sind im Folgenden detailliert beschrieben.
align-content und justify-content
Die align-content-Eigenschaft gilt für die Block-Achse und justify-content für die Inline-Achse. Jeglicher Platz, der den Spalten durch die Verwendung der Raumverteilung hinzugefügt wird, wird zur Lücke zwischen den Spalten hinzugefügt, wodurch die Lücke größer wird, als es durch die column-gap- (oder gap-Kurzschreibweise) Eigenschaft angegeben sein könnte.
Die Verwendung eines Wertes von justify-content abgesehen von normal oder stretch führt dazu, dass Spalten-Boxen mit der im Mehrspalten-Container angegebenen column-width angezeigt werden, und der verbleibende Raum wird entsprechend dem Wert von justify-content verteilt.
column-gap
Die column-gap-Eigenschaft wurde ursprünglich in der Spezifikation für das Mehrspalten-Layout festgelegt und später mit den Lücken-Eigenschaften für andere Layout-Methoden im Box-Alignment vereinheitlicht. Während andere Layout-Methoden den Anfangswert von column-gap als 0 behandeln, behandelt das Mehrspalten-Layout ihn als 1em — in der Regel möchte man eine Lücke zwischen den Spalten.