Flexbox `align-items` : `flex-start` vs `baseline` – Quand dois-je utiliser lequel ?

Comprendre la distinction entre flex-start et baseline

Lors de l'exploitation des propriétés flex -align, la différenciation entre flex-start et baseline peut ne pas être immédiatement apparente. En effet, dans de nombreuses situations impliquant des tailles de police cohérentes ou un contenu équivalent, les deux valeurs semblent produire le même alignement. Cependant, il existe des distinctions cruciales qui deviennent évidentes lorsqu'il s'agit de différentes tailles de contenu.

Alignement de démarrage flexible

La valeur de démarrage flexible aligne les éléments flexibles sur le bord de départ de l'axe transversal dans le conteneur flexible. Cet alignement aligne généralement les bords gauches des éléments flexibles dans les dispositions horizontales et les bords supérieurs dans les dispositions verticales.

Alignement de base

En revanche, la valeur de base aligne les éléments flexibles en fonction de la ligne de base de leur contenu. La ligne de base fait référence à la ligne sur laquelle reposent la plupart des lettres et des caractères, avec des descendants s'étendant en dessous. Les éléments flexibles sont positionnés de telle sorte que leurs lignes de base s'alignent, l'élément présentant la plus grande distance entre sa ligne de base et le bord de la marge de départ croisé étant placé au ras du bord de départ croisé.

Différences d'application

Le choix entre le flex-start et l'alignement de base dépend de l'effet recherché. Flex-start convient lors de l’alignement d’éléments de tailles cohérentes. D'un autre côté, l'alignement de la ligne de base est particulièrement utile lors de la gestion d'éléments avec des tailles de police différentes, car il garantit que la ligne de base est la même pour tous les éléments.

Exemple de démonstration

Considérez l'extrait de code suivant :

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 300px;
  background-color: yellow;
}
.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}
.item1 {
  font-size: 2em;
}
.item2 {
  font-size: 7em;
}
.item3 {
  font-size: 0.5em;
}
.item4 {
  font-size: 3em;
}
.item5 {
  font-size: 10em;
}

Avec l'alignement de la ligne de base appliqué, les éléments flexibles s'alignent le long de leurs lignes de base respectives. Remarquez comment l'alignement est influencé par l'élément le plus haut (élément 5), conformément aux spécifications. Une ligne pointillée représente la ligne de base entre les éléments flexibles.

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!