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

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

Problème :

Lors de l'utilisation de flexbox pour centrer des éléments dans un bloc, il est courant de rencontrer un problème où les éléments apparaissent côte à côte au lieu de verticalement les uns en dessous des autres. Cela peut être indésirable dans certaines situations.

Solution :

Pour empêcher les éléments flexibles de s'afficher côte à côte, implémentez le style CSS suivant :

.inner {
  flex-direction: column;
}

Explication :

Cette propriété de style spécifie la direction dans laquelle les éléments flexibles sont disposés dans l'élément conteneur. En définissant flex-direction sur column, vous demandez à la flexbox d'afficher ses enfants en lignes plutôt qu'en colonnes. Cela aligne les éléments verticalement les uns en dessous des autres, comme vous le souhaitez.

Exemple mis à jour :

L'extrait de code mis à jour suivant montre le fonctionnement de cette solution :

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

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

En utilisant flex-direction: column, le carré orange et le texte sont désormais correctement empilés verticalement dans l'élément conteneur, comme prévu.

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!