Comment puis-je aligner verticalement des éléments flexibles ?

Aligner les éléments flexibles verticalement

Flexbox offre un moyen pratique d'organiser les éléments dans un conteneur. Cependant, vous pouvez parfois rencontrer des problèmes où les éléments sont affichés côte à côte plutôt que dans l'ordre vertical souhaité. Cela peut se produire lors de l'utilisation de display: flex.

Pour empêcher les éléments flex de s'afficher côte à côte, ajoutez simplement le style suivant à l'élément parent :

flex-direction: column;

Cette directive demande à la flexbox d'afficher ses enfants dans des colonnes plutôt que lignes.

Exemple :

Dans l'extrait de code fourni :

<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>

Initialement, les éléments "square" et "some text" seront être placés côte à côte. Pour résoudre ce problème, ajoutez le CSS suivant :

.inner {
  flex-direction: column;
}

Cela garantira que le « carré » est positionné au-dessus de l'élément « du texte », obtenant ainsi la disposition verticale souhaitée.

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!