Comment puis-je centrer un élément Flex dans un conteneur avec d'autres éléments Flex ?

Alignement d'un élément flexible de manière centrale dans un conteneur avec des éléments flexibles supplémentaires

Les propriétés d'alignement flexible allouent un espace inoccupé dans un conteneur. Par conséquent, centrer automatiquement un élément flexible entouré d'autres est impossible à moins que la largeur combinée des éléments voisins ne soit égale à la largeur du conteneur.

Considérez le deuxième exemple fourni. La largeur totale des éléments span est égale des deux côtés de l’élément h2. Par conséquent, le h2 est parfaitement centré dans le conteneur.

<code class="css">.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  margin: 5px;
  padding: 5px;
}

p {
  text-align: center;
}

p > span {
  background-color: aqua;
  padding: 5px;
}</code>

<code class="html"><div class="container">
  <span>I'm span 1</span>
  <span>I'm span 2</span>
  <span>I'm span 3</span>
  <h2>I'm an h2</h2>
  <span>I'm span 4</span>
  <span>I'm span 5</span>
  <span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p></code>

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!