Comment aligner à droite un élément Flexbox en utilisant uniquement « margin-left : auto » ?

Comment aligner correctement un élément avec Flexbox

Problème :

Dans le violon fourni, aligner le troisième élément sur le droit d'utiliser flexbox semble difficile. Le code initial aligne les trois éléments vers la gauche, tandis que le flottant est utilisé pour aligner le dernier élément vers la droite dans le résultat souhaité.

Solution :

Utiliser le la propriété "margin-left: auto" sur le troisième enfant du conteneur flexible l'aligne sans effort vers la droite. Cette technique exploite la fonctionnalité de marges automatiques de flexbox, qui permet la répartition des éléments flexibles en groupes distincts. En spécifiant margin-left: auto sur l'enfant flex final, il ajuste automatiquement sa position pour l'aligner sur le côté droit du conteneur.

Code mis à jour :

L'extrait CSS mis à jour suivant aligne le troisième élément vers la droite à l'aide de flexbox :

.wrap div:last-child {
  margin-left: auto;
}

Le violon mis à jour démontre l'alignement réussi des éléments en utilisant flexbox :

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div:last-child {
  margin-left: auto;
}

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!