Fare un galleggiante oggetto flex destra

Question

ho un

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

Il genitore ha

.parent { 
    display: flex; 
} 

Per il mio primo figlio, voglio galleggiare semplicemente l'oggetto verso destra.

E gli altri miei subacquei seguono la regola flessibile impostata dal genitore.

È possibile qualcosa?

In caso negativo, come si esegue un float: right in modalità flessibile?

Answer 1

Non è possibile utilizzare float all'interno contenitore flessibile e il motivo è che proprietà float non si applica a flettere a livello scatole come si può vedere qui Fiddle.

Quindi, se si desidera posizionare child elemento da destra di parent elemento è possibile utilizzare margin-left: auto ma ora child elemento anche spingere altre div a destra come potete vedere qui Fiddle.

Che cosa si può fare ora è dell'ordine di modifica di elementi e impostare order: 2 su child elemento in modo che non influisce seconda div

.parent { 
 
    display: flex; 
 
} 
 
.child { 
 
    margin-left: auto; 
 
    order: 2; 
 
}

<div class="parent"> 
 
    <div class="child">Ignore parent?</div> 
 
    <div>another child</div> 
 
</div>

Answer 2

Non hai bisogno di carri allegorici. In realtà, sono inutili perché floats are ignored in flexbox.

Inoltre non è necessario il posizionamento CSS.

Esistono diversi metodi flessibili. auto margins sono stati menzionati in another answer.

Qui ci sono altre due opzioni:

• Usa justify-content: space-between e la proprietà order.
• Utilizzare justify-content: space-between e invertire l'ordine dei div.

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