Alignement Flexbox : quelle est la différence entre « flex-start » et « baseline » ?

Flex-Start vs alignement 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épart 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. Cependant, 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 rangée 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. Le résultat suivant est généré :

<div class="flex-container">
  <div class="flex-item">A</div>
  <div class="flex-item">B</div>
  <div class="flex-item">C</div>
  <div class="flex-item">D</div>
  <div class="flex-item">E</div>
</div>

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.

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!