Flexbox align-items: baseline fonctionne, mais align-self: baseline ne fonctionne pas. Pourquoi? - html, css, css3, flexbox

Il semble que j'observe un comportement déroutant avec Flexbox, en particulier lorsque j'essaie d'utiliser align-self: baseline. Le problème fondamental est que cela ne fonctionne tout simplement pas; l'extrait de code suivant illustre le problème:

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

Voici une capture d'écran de ce à quoi ressemble la sortie:

Comme vous pouvez le voir, la ligne de base de l'étiquette est ne pas aligné avec les autres éléments du formulaire, malgré align-self: baseline ensemble. Si j'utilise align-items: baseline sur le conteneur parent, cependant, j'obtiens un résultat différent:

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

Ce comportement est-il correct selon les spécifications,ou est-ce un bug? Si oui, pourquoi? Y at-il un travail autour? Pour référence, j'ai testé sur Chrome 54, Safari 9.1.2 et Firefox 50 sur macOS 10.11.6, et ils semblent tous présenter les mêmes résultats.

Réponses:

Solution

Si vous souhaitez aligner la ligne de base pour tous les éléments, appliquez align-self: baseline à chacun ou, plus simplement, définissez align-items: baseline sur le récipient.

Explication

Un réglage initial d’un conteneur flex est align-items: stretch.

Cela signifie que tous les articles flexibles étendront toute la longueur de l'axe transversal du conteneur.

C'est ce qui se passe dans votre mise en page. SAUF, vous "avez remplacé align-items: stretch sur un article flexible (label), en appliquant align-self: baseline.

Alors que les autres éléments flexibles s'étirent, l'étiquette a un baseline instruction - mais pas de point de référence.

De la spec:

8.3. Alignement transversal: le align-items et align-self Propriétés

baseline

Si l'axe en ligne de l'élément flexible est le même que l'axe transversal, cette la valeur est identique à flex-start.

Sinon, il participe à l'alignement de la ligne de base: tous participants les éléments flexibles sur la ligne sont alignés de telle sorte que leurs lignes de base s'alignent, et l'élément avec la plus grande distance entre sa ligne de base et son le bord de la marge de départ croisé est placé au ras du bord de départ croisé de la ligne.

D'accord, décomposons ceci:

• La première ligne ne s'applique pas. Dans ce cas, l'élément flexible "s axe en ligne est le même que l'axe principal (horizontal), pas l'axe transversal (vertical), donc baseline ne se résout pas à flex-start.

• "... tous les éléments flexibles participants sur la ligne sont alignés de telle sorte que leurs lignes de base s'alignent ..." Eh bien, il n'y a qu'un seul élément avec l'alignement de la ligne de base. Il n'y a pas d'autre ligne de référence pour référence. Apparemment, le navigateur revient à flex-start dans un tel scénario (mais je n'ai pas vu de référence officielle pour ce comportement).

Le reste du langage de spécification n'est pas pertinent pour cette question, mais est couvert en détail dans cet article connexe: Quelle est la différence entre flex-start et baseline?