Flex-Start vs. Grundlinienausrichtung in Flexbox

Wenn Sie mit der align-self-Eigenschaft von CSS Flexbox arbeiten, verstehen Sie den Unterschied zwischen Flex-Start und die Grundlinie ist entscheidend. Auch wenn sie zunächst das gleiche Ergebnis zu liefern scheinen, zeigen sie in bestimmten Szenarien ein unterschiedliches Verhalten.

Flex-Start-Ausrichtung

Flex-Start richtet Flex-Elemente am Anfang aus Kante der Querachse des Flexcontainers. Dies ist normalerweise die Oberseite für horizontale Ausrichtungen und die linke Seite für vertikale Ausrichtungen.

Grundlinienausrichtung

Grundlinie richtet flexible Elemente entlang der Grundlinie ihres Inhalts aus. Die Grundlinie ist die unsichtbare Linie, auf der die meisten Buchstaben ruhen und unter der sich Unterlängen erstrecken.

Unterschiede

In Fällen, in denen die Schriftgröße und der Inhalt von Flex-Elementen konsistent sind, Flex-Start und Baseline führen zu ähnlichen Ergebnissen. Wenn diese Faktoren jedoch variieren, wird die Grundlinienausrichtung deutlicher.

Bei Verwendung der Grundlinienausrichtung bestimmt das höchste Element in der Zeile die Position der Grundlinie. Flex-Elemente werden so ausgerichtet, dass ihre Grundlinien ausgerichtet sind, wobei das Element, das am weitesten von seiner Startrandkante entfernt ist, bündig an dieser Kante platziert wird.

Beispiel

Bedenken Sie den folgenden Code :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

Mit diesem Code werden die Flex-Elemente anhand ihrer Grundlinien ausgerichtet. Die folgende Ausgabe wird generiert:

  
A
  
B
  
C
  
D
  
E

Beachten Sie, dass der Inhalt der Flex-Elemente zwar unterschiedlich groß ist, aber alle entlang der Grundlinie ausgerichtet sind.