Comment puis-je aligner verticalement des éléments flexibles plutôt qu'horizontalement ?

Garder les éléments flexibles alignés verticalement

Lorsque vous utilisez flexbox pour centrer les éléments, il est parfois frustrant lorsque les éléments s'empilent horizontalement au lieu de verticalement. Ce problème survient lorsque les éléments flexibles ont un flux en ligne naturel, comme du texte ou des images.

Problème :

Considérez l'extrait de code suivant :

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="inner">
  <div class="square"></div>
  <p>some text</p>
</div>

L'intention est de centrer à la fois le carré orange et le texte dans le conteneur .inner. Cependant, la sortie affichera le carré et le texte côte à côte, le texte étant coupé à mi-chemin.

Solution :

Pour corriger ce comportement, nous avons besoin pour modifier la direction de flexion du conteneur intérieur. Par défaut, flexbox affiche ses enfants horizontalement. Pour les empiler verticalement, nous définissons la propriété flex-direction sur column.

.inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

Cet extrait de code mis à jour forcera les éléments flexibles à être alignés verticalement, résolvant ainsi le problème d'empilement côte à côte.

Sortie mise à jour :

Le carré orange apparaîtra désormais au-dessus du texte, comme prévu initialement. Il s'agit d'une technique utile lorsque vous souhaitez vous assurer que certains éléments restent alignés d'une manière spécifique dans un conteneur flexible.

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!