web-dev-qa-db-ger.com

Einen Flex-Artikel schwimmen lassen

Ich habe ein

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

Das Elternteil hat

.parent {
    display: flex;
}

Für mein erstes Kind möchte ich den Gegenstand einfach nach rechts schweben lassen.

Und meine anderen Divs folgen der Flex-Regel, die von den Eltern festgelegt wurde. 

Ist das etwas möglich?

Wenn nicht, wie mache ich einen float: right unter flex?

htmlcsscss3flexbox
32
Zhen Liu

Sie können float nicht in flex container verwenden. Der Grund dafür ist, dass die float -Eigenschaft nicht für Flex-Level-Boxen gilt, wie Sie hier Fiddle sehen können. 

Wenn Sie das child-Element rechts neben dem parent-Element positionieren möchten, können Sie margin-left: auto verwenden. Jetzt wird das child-Element auch andere div nach rechts schieben, wie Sie hier Fiddle sehen. 

Sie können jetzt die Reihenfolge der Elemente ändern und order: 2 für das Element child setzen, damit das zweite div nicht beeinflusst wird

.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

Sie brauchen keine Schwimmer. Tatsächlich sind sie unbrauchbar, weil Floats in Flexbox ignoriert werden.

Sie brauchen auch keine CSS-Positionierung.

Es stehen verschiedene Flex-Methoden zur Verfügung. auto Ränder wurden in eine andere Antwort erwähnt.

Hier sind zwei weitere Optionen:

  • Verwenden Sie justify-content: space-between und die order-Eigenschaft.
  • Verwenden Sie justify-content: space-between und kehren Sie die Reihenfolge der divs um.

.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>

können wir auf die Verwendung von Margin-Left verzichten

1
bhargavi