Grundlinie vs. Flex-Start-Ausrichtung

Im flexiblen Layout richtet Flex-Start Elemente am Anfang der Querachse aus, während die Grundlinie richtet sie entlang der Grundlinie ihres Inhalts aus.

Grundlinie Ausrichtung

Wie der Name schon sagt, verankert die Grundlinienausrichtung die Grundlinien der Flex-Elemente, die Linien, an denen sich die meisten Zeichen befinden. Das Element mit dem maximalen Abstand zwischen seiner Grundlinie und der Queranfangskante schließt bündig mit dieser Kante ab.

Visueller Unterschied

Wenn die Schriftgrößen der flexiblen Elemente einheitlich sind oder der Inhalt identisch ist, können Flex-Start und Baseline austauschbar erscheinen. Allerdings treten Unterschiede auf, wenn die Elementgrößen variieren.

Bestimmen der Grundlinie

Das höchste Element in einer Reihe bestimmt die Grundlinie für die Grundlinienausrichtung.

Beispiel

Betrachten Sie den folgenden Code Snippet:

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

Das Element mit der größten Schriftgröße, „B“, bestimmt die Grundlinie für die Zeile. Die anderen Elemente werden entlang der Grundlinie von „B“ ausgerichtet, wie im Bild unten dargestellt.

[Bild von flexiblen Elementen, die mithilfe der Grundlinienausrichtung in unterschiedlichen Höhen ausgerichtet sind]

Wichtiger Hinweis

Das Schlüsselwort „baseline“ wird nicht von allen Browsern unterstützt. Erwägen Sie aus Gründen der browserübergreifenden Kompatibilität die Verwendung von align-items: flex-start in Verbindung mit der Vertical-Align-Eigenschaft von CSS3.