Elementy dopasowujące Flexboksa: linia bazowa działa, ale linia align-self: linia bazowa nie. Czemu? - html, css, css3, flexbox

Wydaje mi się, że obserwuję pewne mylące zachowanie z Flexbox, szczególnie przy próbie użycia align-self: baseline. Podstawową kwestią jest to, że po prostu nie działa; Poniższy fragment pokazuje 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>

Oto zrzut ekranu z wyglądem wyjścia:

Jak widać, linia bazowa etykiety to nie wyrównane z innymi elementami formularza, mimo że align-self: baseline zestaw. Jeśli używam align-items: baseline jednak w kontenerze nadrzędnym otrzymuję inny wynik:

.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>

Czy to prawidłowe zachowanie zgodnie ze specyfikacją,czy jest to błąd? Jeśli tak, to dlaczego? Czy jest w pobliżu praca? Dla porównania przetestowałem na Chrome 54, Safari 9.1.2 i Firefox 50 na MacOS 10.11.6 i wszystkie wydają się wykazywać te same wyniki.

Odpowiedzi:

Rozwiązanie

Jeśli chcesz wyrównać linię bazową dla wszystkich elementów, zastosuj align-self: baseline do każdego lub, prościej, zestaw align-items: baseline na pojemniku.

Wyjaśnienie

Początkowe ustawienie elastycznego kontenera to align-items: stretch.

Oznacza to, że wszystkie elementy elastyczne będą rozszerzać pełną długość osi kontenera.

To właśnie dzieje się w twoim układzie. Z WYJĄTKIEM, zostałeś zastąpiony align-items: stretch na jednym elemencie flex (label), poprzez zastosowanie align-self: baseline.

Podczas gdy inne elementy flex się rozciągają, etykieta ma baseline instrukcja - ale nie ma punktu odniesienia.

Ze specyfikacji:

8.3. Wyrównanie między osiami: align-items i align-self nieruchomości

baseline

Jeśli oś wewnętrzna elementu elastycznego jest taka sama jak oś poprzeczna, to wartość jest identyczna z flex-start.

W przeciwnym razie uczestniczy w wyrównaniu linii bazowej: wszyscy biorący udział elementy flex na linii są wyrównane tak, że ich linie bazowe są wyrównane, i przedmiot o największej odległości między linią bazową a jego linią bazową krawędź marginesu startu krzyżowego jest wyrównana z krawędzią startu poprzecznego linii.

Dobra, zróbmy to:

• Pierwsza linia nie ma zastosowania. W tym przypadku element elastyczny oś liniowa jest taka sama jak oś główna (pozioma), a nie oś poprzeczna (pionowo), więc baseline nie rozwiązuje tego flex-start.

• „... wszystkie uczestniczące elementy flex na linii są wyrównane tak, że ich linie bazowe są wyrównane ...” Cóż, jest tylko jeden element z wyrównaniem linii podstawowej. Nie ma innej linii odniesienia do odniesienia. Najwyraźniej przeglądarka powraca do flex-start w takim scenariuszu (ale nie widziałem oficjalnego odniesienia do tego zachowania).

Reszta języka specyfikacji nie ma znaczenia dla tego pytania, ale jest szczegółowo opisana w tym pokrewnym poście: Jaka jest różnica między flex-start a baseline?