Comment centrer un élément Flex parmi les frères et sœurs dans Flexbox ?

Centrage d'un élément flexible lorsqu'il est entouré d'autres éléments flexibles

Dans Flexbox, l'alignement des éléments est généralement obtenu en distribuant l'espace libre dans le conteneur. Par conséquent, centrer un seul élément flexible parmi les frères et sœurs n'est pas possible à moins que la longueur combinée des frères et sœurs ne soit égale des deux côtés.

Une solution de contournement consiste à envelopper les éléments flexibles environnants dans leurs propres conteneurs. Cela permet un meilleur contrôle sur la répartition de l'espace et permet le centrage de l'élément h2. Considérez la structure HTML modifiée suivante :

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

Avec cette modification, les règles CSS peuvent être ajustées pour aligner le h2 :

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

.container > div {
  flex: 1 1 auto;
  text-align: center;
}

h2 {
  margin: auto;
}</code>

En enveloppant les spans dans des divs séparés, le Les propriétés flexbox peuvent être appliquées pour contrôler leur taille et leur alignement individuels, garantissant que le h2 reste centré, quel que soit le nombre d'éléments environnants.

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!