web-dev-qa-db-fra.com

CSS aligne un élément à droite avec flexbox

https://jsfiddle.net/vhem8scs/

Est-il possible d'avoir deux éléments alignés à gauche et un élément aligné à droite avec flexbox? Le lien le montre plus clairement. Le dernier exemple est ce que je veux réaliser.

Dans flexbox, j'ai un bloc de code. Avec float j'ai quatre blocs de code. C'est une des raisons pour lesquelles je préfère les flexbox.

HTML

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

<!-- DESIRED RESULT -->

<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;
}
cssalignmentflexbox
149
Jens Törnell

Pour aligner un enfant flex sur la droite, définissez-le avec margin-left: auto;

De la flex spec :

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

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

violon 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;
}
<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Remarque:

Vous pouvez obtenir un effet similaire en définissant flex-grow: 1 sur l'élément de flex moyen (ou en abrégé flex:1), ce qui pousserait le dernier élément complètement vers la droite. (Démo)

La différence évidente cependant est que l'élément central devient plus grand qu'il ne le devrait peut-être. Ajoutez une bordure aux éléments flexibles pour voir la différence.

démo

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}
.wrap div {
  border: 3px solid tomato;
}
.margin div:last-child {
  margin-left: auto;
}
.grow div:nth-child(2) {
  flex: 1;
}
.result {
  background: #ccc;
  margin-top: 20px;
}
.result:after {
  content: '';
  display: table;
  clear: both;
}
.result div {
  float: left;
}
.result div:last-child {
  float: right;
}
<div class="wrap margin">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

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

<!-- DESIRED RESULT -->
<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
389
Danield

Pour une option flexbox pure et concise, regroupez les éléments alignés à gauche et les éléments alignés à droite:

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

et utilisez space-between:

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

De cette façon, vous pouvez regrouper plusieurs éléments à droite (ou un seul).

https://jsfiddle.net/c9mkewwv/3/

29
spflow

Pour aligner certains éléments (headerElement) au centre et le dernier élément à droite (headerEnd).

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}
2
Satvik Vats