Comment puis-je empêcher les éléments flexibles de s'afficher côte à côte au lieu de s'empiler verticalement ?

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

Lorsque nous utilisons flexbox, nous rencontrons souvent des situations dans lesquelles nous souhaitons centrer les éléments dans un bloc, mais avec chaque élément occupant sa propre ligne. Malheureusement, flexbox écarte parfois les éléments lorsque nous voulons qu'ils soient positionnés les uns en dessous des autres.

Considérez la structure HTML suivante, où un carré orange et un élément de texte sont placés à l'intérieur d'un conteneur à l'aide de flexbox avec justifier-contenu : center et align-items: center:

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

Et le CSS associé :

.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;
}

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

Lors de l'application de flexbox, le carré orange, au lieu d'être positionné au-dessus du texte, se termine sur le côté. Pour remédier à cela, nous devons modifier la propriété flex-direction du conteneur interne :

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

Définition de flex-direction : la colonne demande à la flexbox d'afficher ses enfants verticalement, les uns en dessous des autres, plutôt que dans une rangée. . Ce comportement correspond à notre exigence, en plaçant le carré orange au-dessus du texte.

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!