Comment puis-je aligner à droite un élément Flexbox tandis que les autres restent alignés à gauche ?

Alignement des éléments Flexbox : option alignée à droite

Question :

Dans le contexte de flexbox, est-il possible de aligner deux éléments à gauche et un élément à droite ? Pour une représentation visuelle, reportez-vous au lien JSFiddle fourni.

Réponse :

Pour obtenir un alignement à droite pour un enfant flexible, définissez sa marge gauche : auto ;.

Selon la spécification flex :

Les marges automatiques sur l'axe principal peuvent être utilisées pour séparer les éléments flexibles en différents "groupes". Cela permet la création de modèles d'interface utilisateur tels que des barres d'action avec certains éléments alignés à gauche et d'autres à droite.

Par conséquent, le CSS suivant alignera le dernier élément div de l'exemple fourni à droite :

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

En combinant cette technique avec vos styles flexbox existants, vous pouvez obtenir la mise en page souhaitée sans nécessiter plusieurs blocs de code.

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!