Maison > interface Web > tutoriel CSS > Comment aligner à droite un élément Flexbox ?

Comment aligner à droite un élément Flexbox ?

Linda Hamilton
Libérer: 2024-12-14 09:22:11
original
527 Les gens l'ont consulté

How Do I Right-Align a Flexbox Item?

Comment puis-je aligner un élément à droite avec flexbox ?

Dans flexbox, vous pouvez définir la marge gauche : auto ; propriété pour aligner un élément vers la droite.

La spécification flexbox indique :

"Une utilisation des marges automatiques dans l'axe principal consiste à séparer les éléments flexibles
en 'groupes' distincts. L'exemple suivant montre comment l'utiliser pour
reproduire un modèle d'interface utilisateur commun : une seule barre d'actions avec certaines
alignées à gauche et d'autres alignées à gauche. à droite."

Voici un extrait de code mis à jour :

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

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

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}
Copier après la connexion

Le violon mis à jour ci-dessous démontre l'alignement :

[démo du violon](https://jsfiddle.net /vhem8scs/)

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal