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
450 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!

source:php.cn
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