Pourquoi « justify-content : center » ne centre-t-il pas le texte lorsqu'il est enveloppé dans un conteneur Flex ?

Texte non centré avec justifier-content : center

Ce problème survient lorsque le contenu d'un conteneur flexible devient excessivement long, ce qui entraîne un emballage . Alors que le contenu est centré horizontalement avec justifier-content: center, l'alignement est perturbé lors de l'emballage.

Comprendre les trois niveaux dans Flexbox

Une structure de conteneur flexible se compose de trois niveaux :

• Conteneur
• Article
• Contenu

Chaque niveau représente un élément indépendant.

Justification dans les conteneurs flexibles

justify-content contrôle l'alignement des éléments flexibles dans le conteneur, mais il n'influence pas directement les enfants de l'élément (dans ce cas, le texte).

Lorsque le La largeur du conteneur flex dépasse la largeur du contenu, l'élément flex se rétrécit pour s'adapter au contenu (rétrécir pour s'adapter) et est centré horizontalement. Le contenu de l'élément suit automatiquement cet alignement.

Alignement lorsque le contenu dépasse le conteneur flexible

Cependant, lorsque le contenu devient plus large que le conteneur flexible, l'élément flexible peut ne s'alignent plus. Étant donné que l'élément occupe toute la largeur du conteneur, l'espace libre est insuffisant pour l'alignement.

Alignement du texte

Malgré le désalignement, text-align: center n'a jamais été appliqué à le texte par défaut. Pour le centrer directement, text-align: center doit être explicitement ajouté soit à l'élément flex, soit au conteneur flex.

Exemple de code

<code class="css">article {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<code class="html"><article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article></code>

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!