Alignement Flex-Start par rapport à la ligne de base dans Flexbox

Lorsque vous travaillez avec la propriété align-self de CSS Flexbox, comprendre la différence entre flex-start et la ligne de base est cruciale. Bien qu'ils puissent initialement sembler produire le même résultat, ils présentent un comportement distinct dans certains scénarios.

Alignement Flex-Start

flex-start aligne les éléments flexibles au début bord de l’axe transversal du conteneur flexible. Il s'agit généralement du haut pour les orientations horizontales et de la gauche pour les orientations verticales.

Alignement de la ligne de base

la ligne de base aligne les éléments flexibles le long de la ligne de base de leur contenu. La ligne de base est la ligne invisible sur laquelle reposent la plupart des lettres et en dessous de laquelle s'étendent les descendants.

Différences

Dans les cas où la taille de la police et le contenu des éléments flexibles sont cohérents, flex-start et baseline produiront des résultats similaires. Toutefois, lorsque ces facteurs varient, l'alignement de la ligne de base devient plus apparent.

Lors de l'utilisation de l'alignement de la ligne de base, l'élément le plus haut de la ligne détermine la position de la ligne de base. Les éléments flexibles sont alignés de manière à ce que leurs lignes de base soient alignées, l'élément le plus éloigné de son bord de marge de départ étant placé au ras de ce bord.

Exemple

Considérez le code suivant :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

Avec ce code, les éléments flexibles sont alignés en utilisant leurs lignes de base. La sortie suivante est générée :

  
A
  
B
  
C
  
D
  
E

Notez que même si le contenu des éléments flexibles varie en taille, ils sont tous alignés le long de la ligne de base.