Comment aligner le texte dans les éléments Flexbox lorsque le contenu dépasse la largeur de l'élément ?

Alignement du texte avec Flexbox : comprendre Justify-Content et Text-Align

Dans flexbox, la propriété justifier-content aligne les éléments flexibles le long du axe principal, tandis que text-align aligne le contenu du texte dans ces éléments flexibles. Lorsque le contenu d'un élément flexible dépasse sa largeur, une inadéquation d'alignement peut se produire.

Comportement d'alignement du texte par défaut

Par défaut, le texte est aligné à gauche (ou aligné à droite dans les langues s'écrivant de droite à gauche). Lorsque vous utilisez justifier-content: center sur un conteneur flexbox, les éléments flexibles sont centrés horizontalement dans le conteneur. Cependant, cet alignement ne s'applique qu'aux éléments flexibles eux-mêmes, et non à leur contenu.

Lorsque la largeur du contenu dépasse la largeur de l'élément

Lorsque le contenu du texte est plus large que l'élément flexible , l'élément ne peut pas être aligné davantage (par exemple, centré ou justifié) car il occupe toute la largeur disponible. En conséquence, le texte conserve son style aligné à gauche par défaut.

Correction de l'alignement avec Text-Align

Pour centrer le texte dans les éléments flexibles, vous devez définissez explicitement text-align: center soit sur les éléments flexibles, soit sur leur conteneur parent. Cela remplace le comportement par défaut aligné à gauche et aligne le contenu du texte de la manière souhaitée.

Exemple :

<code class="css">.flex-container {
  display: flex;
  justify-content: center;
}

.flex-item {
  text-align: center;
}</code>

Dans cet exemple, la classe flex-item inclut text-align: center, qui garantit que le contenu du texte est centré dans chaque élément flexible, quelle que soit la largeur de l'élément.

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!