Flexbox align-items: Grundlinie funktioniert, aber align-self: Grundlinie nicht. Warum?

8

Ich beobachte ein paar verwirrende Verhaltensweisen mit flexbox, insbesondere beim Versuch, align-self: baseline zu verwenden. Das grundlegende Problem ist, dass es einfach nicht funktioniert; Das folgende Snippet zeigt das Problem:

%Vor% %Vor%

Hier ist ein Screenshot, wie die Ausgabe aussieht:

  

Wie Sie sehen, ist die Basislinie der Beschriftung nicht mit den anderen Formularelementen ausgerichtet, obwohl align-self: baseline gesetzt ist. Wenn ich align-items: baseline für den übergeordneten Container verwende, erhalte ich jedoch ein anderes Ergebnis:

%Vor% %Vor%
  

Ist das das richtige Verhalten gemäß der Spezifikation oder ist es ein Fehler? Wenn ja warum? Gibt es eine Problemumgehung? Als Referenz habe ich auf Chrome 54, Safari 9.1.2 und Firefox 50 auf macOS 10.11.6 getestet, und alle scheinen die gleichen Ergebnisse zu zeigen.

    
Alexis King 21.11.2016, 19:13
quelle

1 Antwort

4

Lösung

Wenn Sie die Grundlinienausrichtung für alle Elemente festlegen möchten, wenden Sie align-self: baseline auf jedes oder, einfacher, setzen Sie align-items: baseline auf den Container.

Erklärung

Eine anfängliche Einstellung eines Flex-Containers ist align-items: stretch .

Dies bedeutet, dass alle flexiblen Elemente die gesamte Querachsenlänge des Containers erweitern.

Das passiert in Ihrem Layout. EXCEPT Sie haben align-items: stretch für ein Flex-Element ( label ) überschrieben, indem Sie align-self: baseline angewendet haben.

Während die anderen Flex-Elemente gedehnt werden, hat das Label eine Anweisung baseline - aber keinen Bezugspunkt.

Aus der Spezifikation:

  

8.3. Achsenübergreifende Ausrichtung: align-items und align-self   Eigenschaften

     

baseline

     

Wenn die Inline-Achse des Flex-Elements die gleiche ist wie die Cross-Achse, ist dies der Fall   Wert ist identisch mit flex-start .

     

Ansonsten nimmt es an der Grundlinienausrichtung teil: alle Teilnehmer   Flex-Elemente auf der Linie sind so ausgerichtet, dass ihre Grundlinien ausgerichtet sind,   und das Objekt mit der größten Entfernung zwischen seiner Grundlinie und seiner   Cross-Start-Rand Rand ist bündig gegen die Cross-Start-Kante platziert   der Linie.

Okay, lasst uns das kaputt machen:

  • Die erste Zeile trifft nicht zu. In diesem Fall ist die Inline-Achse des Flex-Elements dieselbe wie die Hauptachse (horizontal), nicht die Querachse (vertikal). Daher wird baseline nicht in flex-start aufgelöst.

  • "... alle beteiligten Flex-Elemente in der Linie sind so ausgerichtet, dass ihre Grundlinien ausgerichtet sind ..." Nun, es gibt nur ein Element mit Grundlinienausrichtung. Es gibt keine andere Basislinie als Referenz. Offenbar fällt der Browser in einem solchen Szenario auf flex-start zurück (aber ich habe keine offizielle Referenz für dieses Verhalten gesehen).

Der Rest der Spezifikationssprache ist für diese Frage nicht relevant, wird aber in diesem verwandten Beitrag ausführlich behandelt: Was ist? der Unterschied zwischen Flex-Start und Baseline?

    
Michael_B 21.11.2016, 19:30
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie listet Kubernetes kürzlich gelöschte Pods auf?