web-dev-qa-db-fra.com

Faire flotter un article flexible à droite

J'ai un

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

Le parent a

.parent {
    display: flex;
}

Pour mon premier enfant, je veux simplement faire flotter l’article à droite.

Et mes autres divs doivent suivre la règle de flex définie par le parent. 

Est-ce que c'est possible?

Si non, comment puis-je faire un float: right sous flex?

htmlcsscss3flexbox
32
Zhen Liu

Vous ne pouvez pas utiliser float dans flex container. La raison en est que la propriété float ne s'applique pas aux boîtes de niveaux flexibles comme vous pouvez le voir ici Fiddle . 

Donc, si vous voulez positionner l'élément child à droite de l'élément parent, vous pouvez utiliser margin-left: auto mais maintenant, l'élément child poussera également l'autre div à droite comme vous pouvez le voir ici Fiddle . 

Ce que vous pouvez faire maintenant, c’est modifier l’ordre des éléments et définir order: 2 sur l’élément child pour qu’il n’affecte pas la seconde division.

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

69
Nenad Vracar

Vous n'avez pas besoin de flotteurs. En fait, ils sont inutiles parce que les flottants sont ignorés dans flexbox .

Vous n'avez également pas besoin de positionnement CSS.

Plusieurs méthodes de flex sont disponibles. auto marges ont été mentionnés dans autre réponse .

Voici deux autres options:

  • Utilisez justify-content: space-between et la propriété order.
  • Utilisez justify-content: space-between et inversez l’ordre des divs.

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}
<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>

12
Michael_B

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

pouvons-nous faire sans utiliser margin-left

1
bhargavi