Comment empêcher les éléments flexibles de s'afficher côte à côte ?

Empêcher les éléments flexibles de s'afficher côte à côte

Flexbox offre un moyen efficace d'aligner les éléments dans un bloc. Cependant, si vous rencontrez un scénario dans lequel vous souhaitez que les éléments s'affichent verticalement plutôt qu'horizontalement, le comportement flexible par défaut peut être un obstacle.

Énoncé du problème :

Malgré en utilisant flexbox pour centrer les éléments dans un bloc, les éléments continuent d'apparaître côte à côte. Le résultat souhaité est que chaque élément occupe sa propre ligne. Le carré orange, par exemple, devrait être au-dessus du texte, mais flex l'a repositionné à côté du texte.

Solution :

La clé pour résoudre ce problème réside en ajoutant le style suivant :

.inner {
  flex-direction: column;
}

En spécifiant "colonne" comme direction de flexion, nous demandons à la flexbox d'afficher ses enfants verticalement. Cela résout le problème et positionne les éléments comme prévu.

Extrait mis à jour :

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

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

<style>
  .container {
    ...
  }

  .inner {
    ...
    flex-direction: column;
  }

  .square {
    ...
  }
</style>

Avec la propriété "flex-direction" définie sur "column", le Les éléments flexbox s'afficheront désormais en lignes, résolvant le problème initial du positionnement côte à côte.

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!