Flexbox align-items: la línea de base funciona, pero align-self: baseline no. ¿Por qué? - html, css, css3, flexbox

Parece que estoy observando algún comportamiento confuso con flexbox, específicamente cuando intento usar align-self: baseline. El problema básico es que simplemente no funciona; el siguiente fragmento muestra el problema:

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

Aquí hay una captura de pantalla de cómo se ve la salida:

Como puede ver, la línea de base de la etiqueta es no alineado con los otros elementos de forma, a pesar de tener align-self: baseline conjunto. Si yo uso align-items: baseline en el contenedor principal, sin embargo, obtengo un resultado diferente:

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

¿Es este correcto comportamiento según la especificación,¿O se trata de un error? Si es así, ¿por qué? ¿Hay una solución? Para referencia, he probado en Chrome 54, Safari 9.1.2 y Firefox 50 en macOS 10.11.6, y todos parecen mostrar los mismos resultados.

Respuestas

Solución

Si desea alineación de línea de base para todos los elementos, aplique align-self: baseline a cada uno o, más simplemente, establecer align-items: baseline en el contenedor.

Explicación

Un ajuste inicial de un contenedor flexible es align-items: stretch.

Esto significa que todos los elementos flexibles expandirán la longitud completa del eje transversal del contenedor.

Eso es lo que está sucediendo en su diseño. EXCEPTO, has anulado align-items: stretch en un artículo flexible (label), aplicando align-self: baseline.

Mientras que los otros elementos flexibles se estiran, la etiqueta tiene un baseline Instrucción - pero sin punto de referencia.

De la especificación:

8.3. Alineación del eje transversal: la align-items y align-self propiedades

baseline

Si el eje en línea del elemento flexible es el mismo que el eje transversal, este el valor es idéntico a flex-start.

De lo contrario, participa en la alineación de línea de base: todos participando Los elementos de flexión en la línea están alineados de modo que sus líneas de base se alinean y el elemento con la mayor distancia entre su línea de base y su el borde del margen de inicio cruzado se coloca al ras contra el borde de inicio cruzado de la linea.

Está bien, vamos a descomponer esto:

• La primera línea no se aplica. En este caso, el elemento flex "s eje en linea es el mismo que el eje principal (horizontal), no el eje transversal (vertical), por lo que baseline no se resuelve flex-start.

• "... todos los elementos flexibles participantes en la línea están alineados de modo que sus líneas de base se alinean ..." Bueno, solo hay un elemento con alineación de línea de base. No hay otra línea de referencia para referencia. Aparentemente, el navegador recurre a flex-start en tal escenario (pero no he visto una referencia oficial para este comportamiento).

El resto del lenguaje de especificaciones no es relevante para esta pregunta, pero se trata en detalle en esta publicación relacionada: ¿Cuál es la diferencia entre flex-start y baseline?