Comment aligner à droite un seul élément dans un conteneur Flexbox ?

Comment aligner correctement un élément avec Flexbox

Atteindre un alignement précis des éléments est un défi courant dans la conception Web. Flexbox offre une solution puissante, mais l'alignement des éléments dans des configurations spécifiques peut s'avérer délicat. Cet article explore un scénario courant dans lequel un élément doit être aligné au milieu d'autres éléments flexibles.

Énoncé du problème

Considérez un conteneur flexible avec trois éléments enfants disposés côte à côte. Le résultat souhaité est d’avoir les deux premiers éléments alignés à gauche et le troisième élément aligné à droite. Les codes HTML et CSS suivants représentent la configuration initiale :

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

.wrap {
  display: flex;
  justify-content: space-between;
}

Solution : Margin-Left Auto

Flexbox fournit une solution simple à ce problème. : réglage de margin-left: auto sur le dernier élément enfant. D'après la spécification flex :

Une utilisation des marges automatiques dans l'axe principal consiste à séparer les éléments flexibles en "groupes" distincts. Ceci est illustré par le modèle d'interface utilisateur commun d'une seule barre d'actions, dont certaines sont alignées à gauche et d'autres à droite.

Application de margin-left: auto au dernier L'élément enfant dans notre exemple donne l'alignement souhaité :

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

Mise à jour Exemple

Avec ce CSS révisé, l'extrait de code HTML et CSS résultant donne l'alignement souhaité, avec les deux premiers éléments alignés à gauche et le troisième élément aligné à droite dans le conteneur flexible :

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

.wrap {
  display: flex;
  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!