Tous les principaux moteurs de navigateur prennent désormais en charge le dernier alignement de référence dans la grille CSS et l'environnement Flexbox.
Navigateurs pris en charge
- 108
- 108
- 52
- 16,2
L'alignement à l'aide des mots clés first et last est désormais disponible dans tous les principaux moteurs. Cela signifie que nous pouvons utiliser le dernier alignement de la ligne de base comme autre option pour aligner des groupes d'éléments Flex ou Grille.
Premier alignement de la ligne de base
Si vous définissez la valeur de align-items sur baseline, le résultat sera le premier alignement de la référence. Par conséquent, la première ligne de base de l'élément que vous alignez (décrite comme sujet de l'alignement) s'aligne sur la première ligne des autres éléments du groupe. Vous pouvez voir cela dans l'exemple suivant, où les deux premiers éléments Flex sont alignés à l'aide de align-items: baseline. Ils s'alignent donc le long de la ligne de base créée par le texte de grande taille. L'élément final est aligné sur flex-start et donc sur le début du conteneur Flex.
Dernier alignement de référence
Lorsque vous alignez un élément de grille ou un élément Flex avec la valeur last baseline, la dernière ligne de base de cet élément s'aligne sur celle du groupe de partage de référence dont il fait partie. L'exemple suivant illustre le dernier alignement de la ligne de base, le premier élément Flex s'alignant sur la dernière ligne de texte de l'élément plus grand. Le dernier élément de ce groupe est aligné sur flex-end, qui est la fin du conteneur Flex.
Alignement de remplacement
Si le sujet de l'alignement n'a pas de groupe de partage de référence sur lequel s'aligner, un alignement de remplacement sera utilisé. Pour baseline et first baseline, l'alignement de la création de remplacement est start. Pour last baseline, l'alignement est end.