Einen flexiblen Gegenstand nach rechts schweben lassen

108

Ich habe ein

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

Der 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 vom Elternteil festgelegten Flex-Regel.

Ist das möglich?

Wenn nicht, wie mache ich einen float: rightUnder Flex?

html css flexbox Zhen Liu
quelle

Antworten:

202

Sie können nicht floatinnerhalb flex Behälter und der Grund dafür ist , dass float Eigenschaft gilt nicht für flex-Level - Boxen , wie Sie hier sehen können Fiddle.

Wenn Sie also ein childElement rechts vom parentElement positionieren möchten, können Sie es verwenden, margin-left: autoaber jetzt childschiebt das Element auch ein anderes Element divnach rechts, wie Sie hier sehen können Fiddle.

Was Sie jetzt tun können, ist, die Reihenfolge der Elemente zu ändern und order: 2auf childElement zu setzen, damit die zweite Division 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>
Erweitern Sie das Snippet

Nenad Vracar
quelle
Danke, ich kann mir die erste Lösung ansehen. Ich möchte nicht display: absolute verwenden, da meine anderen Kinder nicht unter das erste Kind fallen sollten.
Zhen Liu
4
" Schwimmer dringen nicht in den Flexbehälter ein ". Das stimmt, aber es ist nicht der Grund. Der Grund dafür ist, dass die floatEigenschaft nicht für Flex-Level-Boxen gilt.
Oriol
Das funktioniert, danke! Warum funktioniert justify-self: end;(oder ähnliches) nicht für das Kind? Dies scheint eine nicht so flexible Lösung für ein Flexbox-Problem zu sein.
Brady Dowling
1
@BradyDowling Ich weiß, dass dies eine späte Antwort ist, aber für das Rechtfertigungs-Selbst-Ende muss die Anzeige auf ein Raster eingestellt sein. Flexboxen ignorieren das Rechtfertigungs-Selbst: Ende. Siehe hier: developer.mozilla.org/en-US/docs/Web/CSS/justify-self
Paul
<div> ein anderes Kind </ div> <div class = "child"> Eltern ignorieren? </ div> Sie können die beiden div tauschen und ohne die Reihenfolge 2 funktioniert es auch
yeeen
26

Sie brauchen keine Schwimmer. Tatsächlich sind sie nutzlos, da Floats in der Flexbox ignoriert werden .

Sie benötigen auch keine CSS-Positionierung.

Es stehen verschiedene Flex-Methoden zur Verfügung. autoRänder wurden in einer anderen Antwort erwähnt .

Hier sind zwei weitere Optionen:

  • Verwenden Sie justify-content: space-betweenund dieorder Eigenschaft.
  • Verwenden justify-content: space-betweenund 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>
Erweitern Sie das Snippet

Michael Benjamin
quelle