Flexbox-Ausrichtungselemente: Basislinie funktioniert, aber Ausrichten selbst: Basislinie nicht Warum? - HTML, CSS, CSS3, Flexbox

Ich beobachte anscheinend ein verwirrendes Verhalten mit der Flexbox, insbesondere beim Versuch, sie zu verwenden align-self: baseline. Das Grundproblem ist, dass es einfach nicht funktioniert. Das folgende Snippet veranschaulicht das Problem:

.flex-form {
display: flex;
}

.flex-form label {
align-self: baseline;
}

input[type=text] {
border: 1px solid black;
font-size: 16px;
margin: 0 10px;
padding: 5px;
}

button {
background-color: white;
border: 1px solid black;
margin: 0;
}

<form class="flex-form">
<label>Label: </label>
<input type="text" placeholder=" " />
<button type="submit">Submit</button>
</form>

Hier ist ein Screenshot davon, wie die Ausgabe aussieht:

Wie Sie sehen, ist die Grundlinie des Etiketts nicht mit den anderen Formelementen ausgerichtet, obwohl align-self: baseline einstellen. Wenn ich benutze align-items: baseline Auf dem übergeordneten Container erhalte ich jedoch ein anderes Ergebnis:

.flex-form {
display: flex;
align-items: baseline;
}

input[type=text] {
border: 1px solid black;
font-size: 16px;
margin: 0 10px;
padding: 5px;
}

button {
align-self: stretch;
background-color: white;
border: 1px solid black;
margin: 0;
}

<form class="flex-form">
<label>Label: </label>
<input type="text" placeholder=" " />
<button type="submit">Submit</button>
</form>

Ist das korrektes Verhalten gemäß der Spezifikation,oder ist es ein Fehler? Wenn ja warum? Gibt es eine Problemumgehung? Als Referenz habe ich Chrome 54, Safari 9.1.2 und Firefox 50 unter Mac OS 10.11.6 getestet und alle scheinen dieselben Ergebnisse zu liefern.

Antworten:

Lösung

Wenn Sie eine Grundlinienausrichtung für alle Elemente wünschen, wenden Sie an align-self: baseline zu jedem oder einfacher gesetzt align-items: baseline auf dem Behälter.

Erläuterung

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

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

Das passiert in Ihrem Layout. AUSSERSie haben überschrieben align-items: stretch auf einem flexiblen Gegenstand (label), durch Auftragen align-self: baseline.

Während sich die anderen Flex-Elemente dehnen, hat das Etikett ein baseline Anleitung - aber kein Bezugspunkt.

Aus der Spezifikation:

8.3. Querachsenausrichtung: die align-items und align-self Eigenschaften

baseline

Wenn die Inline-Achse des Flex-Elements mit der Querachse identisch ist, Wert ist identisch mit flex-start.

Andernfalls nimmt es an der Grundlinienausrichtung teil: alle teilnehmenden Flex-Elemente auf der Linie sind so ausgerichtet, dass ihre Basislinien ausgerichtet sind. und der Gegenstand mit dem größten Abstand zwischen seiner Grundlinie und seiner Cross-Start-Randkante liegt bündig an der Cross-Start-Kante an der Linie.

Okay, lass uns das aufschlüsseln:

• Die erste Zeile ist nicht zutreffend. In diesem Fall ist das flexible Element "s Inline-Achse ist die gleiche wie die Hauptachse (horizontal), nicht die Querachse (vertikal), also baseline löst nicht auf flex-start.

• "... alle an der Linie teilnehmenden Flex-Elemente werden so ausgerichtet, dass ihre Basislinien ausgerichtet sind ..." Nun, es gibt nur ein Element mit Grundlinienausrichtung. Es gibt keine andere Grundlinie als Referenz. Anscheinend greift der Browser zurück auf flex-start in einem solchen Szenario (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?