Flex-Start ou alignement de base : quand devriez-vous utiliser lequel ?

Alignement de base vs Flex-Start

Dans une mise en page flexible, flex-start aligne les éléments au début de l'axe transversal, tandis que la ligne de base les aligne le long de la ligne de base de leur contenu.

Baseline Alignement

Comme son nom l'indique, l'alignement de la ligne de base ancre les lignes de base des éléments flexibles, les lignes où se trouvent la plupart des caractères. L'élément avec la distance maximale entre sa ligne de base et son bord de départ croisé sera aligné contre ce bord.

Différence visuelle

Lorsque les tailles de police des éléments flexibles sont uniformes ou si le contenu est identique, flex-start et baseline peuvent sembler interchangeables. Cependant, des différences apparaissent lorsque la taille des éléments varie.

Détermination de la ligne de base

L'élément le plus haut d'une rangée détermine la ligne de base pour l'alignement de la ligne de base.

Exemple

Considérez le code suivant extrait :

.flex-container {
  align-items: baseline;
  ...
}
...
.flex-item {
  font-size: 2em;
  ...
}
...
.flex-item.item2 {
  font-size: 7em;
}

L'élément avec la plus grande taille de police, "B", déterminera la ligne de base de la ligne. Les autres éléments s'aligneront le long de la ligne de base de « B », comme illustré dans l'image ci-dessous.

[Image d'éléments flexibles alignés à différentes hauteurs à l'aide de l'alignement de la ligne de base]

Remarque importante

Le mot-clé de base n'est pas pris en charge par tous les navigateurs. Pour une compatibilité entre navigateurs, envisagez d'utiliser align-items: flex-start en conjonction avec la propriété vertical-align de CSS3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!