Box-Ausrichtung in Mehrspalten-Layout

Das CSS Box-Ausrichtungsmodul beschreibt, wie die Ausrichtung in verschiedenen Layout-Methoden funktioniert; in diesem Leitfaden erkunden wir, wie die Box-Ausrichtung im Kontext von Mehrspalten-Layout funktioniert. Da dieser Leitfaden darauf abzielt, Dinge zu erläutern, die für beide Module spezifisch sind, sollte er in Verbindung mit dem Box-Ausrichtungsüberblick gelesen werden, der die gemeinsamen Merkmale der Box-Ausrichtung über Layout-Methoden hinweg beschreibt.

Im Mehrspalten-Layout ist der Ausrichtungs-Container die Inhaltsbox des Mehrspalten-Containers. Das Ausrichtungs-Subjekt ist die Spaltenbox. Die Eigenschaften, die auf Mehrspalten-Layouts zutreffen, werden unten ausführlich beschrieben.

align-content und justify-content

Die Eigenschaft align-content gilt für die Blockachse und justify-content für die Inlineachse. Jeder durch die Verteilung des Raums hinzugefügte Abstand wird zu dem Spaltenabstand hinzugefügt, wodurch der Abstand größer wird als möglicherweise durch die Eigenschaft column-gap (oder den Kurzschreibweise gap) angegeben.

Die Verwendung eines anderen Wertes als justify-content außer normal oder stretch führt dazu, dass Spaltenboxen in der auf dem Mehrspalten-Container angegebenen column-width angezeigt werden, und der verbleibende Raum wird entsprechend dem Wert von justify-content verteilt.

column-gap

Die Eigenschaft column-gap wurde ursprünglich in der Mehrspalten-Layout-Spezifikation spezifiziert und später mit den Lücken-Eigenschaften anderer Layout-Methoden in der Box-Ausrichtung vereinheitlicht. Während andere Layout-Methoden den Anfangswert von column-gap als 0 behandeln, behandelt das Mehrspalten-Layout ihn als 1em — man möchte in der Regel einen Abstand zwischen den Spalten.

Siehe auch