Comment aligner un seul élément vers la droite à l'aide de Flexbox ?

Alignement d'un élément à droite avec Flexbox

Pour répondre à la question de l'alignement d'un élément directement dans une mise en page flexbox, les codes HTML et CSS fournis présenter une configuration de base de flexbox qui positionne deux éléments à gauche et un élément à droite dans un conteneur.

HTML

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

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

CSS

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

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

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

.result div {
  float: left;
}

.result div:last-child {
  float: right;
}

Approche Flexbox

Pour aligner un élément enfant à droite, définissez-le avec margin-left: auto;. Cela exploite la propriété de marge automatique dans l'axe principal, ce qui est utile pour séparer les éléments flexibles en groupes distincts.

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

Fiddle mis à jour

Un JSFiddle mis à jour le démontre approcher efficacement :

[Mise à jour Fiddle](https://jsfiddle.net/vhem8scs/)

Dans le CSS mis à jour, le margin-left: auto; La propriété est appliquée au dernier élément div du conteneur .wrap, ce qui l'aligne à droite.

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!