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

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

Problème :

Aligner les éléments enfants dans un conteneur flexbox, avec un élément centré et l'autre aligné à gauche.

Code :

#parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 500px;
}
#left {
  margin-right: auto;
}
#center {
  margin: auto;
}

Problème :

Utilisation de margin-right : auto pousse l'élément centré hors du centre.

Solution sans positionnement absolu :

Ajouter un troisième élément vide :

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

Appliquez les styles suivants :

.parent {
  display: flex;
}
.left, .right {
  flex: 1;
}

Explication :

La gauche et la droite sont définies pour grandir (flex : 1), en répartissant uniformément l'espace disponible. Puisque l'élément vide de droite a la même largeur que celui de gauche, l'élément central reste parfaitement centré.

Avantages de cette solution :

• Pas besoin de copier le contenu entre les éléments.
• Élément parfaitement centré, quelle que soit la largeur du contenu.

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!