Comment aligner les éléments à gauche et au centre avec Flexbox sans positionnement absolu ?

Alignement des éléments à gauche et au centre avec Flexbox

Flexbox offre un moyen puissant d'aligner des éléments dans un conteneur. Cependant, un défi courant se pose lorsque l'on tente d'aligner un élément à gauche et un autre au centre sans recourir à un positionnement absolu.

Le problème

Lors de l'utilisation de margin- right : auto pour aligner l’élément de gauche, il pousse par inadvertance l’élément central vers la droite. En effet, la valeur automatique répartit l'espace restant de manière égale entre les éléments auxquels elle est appliquée.

La solution sans positionnement absolu

Pour contourner ce problème sans positionnement absolu, ajoutez un troisième élément vide au conteneur :

<code class="html"><div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div></code>

Ensuite, appliquez le CSS suivant :

<code class="css">.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}</code>

Comment ça marche

Le La propriété flex détermine la façon dont l'espace disponible est réparti entre les éléments en croissance. Dans ce cas, la gauche et la droite vont croître et répartiront uniformément l’espace entre elles. Puisqu'il n'y a que deux éléments en croissance, l'élément central sera toujours parfaitement centré.

Avantages de cette approche

Cette approche est supérieure à la réponse acceptée à plusieurs égards :

• Il ne nécessite pas de copier le contenu de gauche vers la droite et de le masquer pour obtenir une largeur égale des deux côtés.
• Il s'appuie sur les propriétés inhérentes de flexbox pour obtenir l'objectif souhaité. alignement, ce qui en fait une solution plus élégante.

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!