Esiste un'alternativa a "Float" per un contenitore flessibile?

Question

Recentemente ho notato che float: right/left non funziona su un elemento figlio quando il contenitore padre ha display: flex. Voglio che alcuni degli elementi figlio siano spinti verso destra come facciamo con float: right.

.bodycontainer { 
 
    width: 100%; 
 
    background-color: #666633; 
 
    padding: 10px 0; 
 

 
} 
 
.bodycontainer2 { 
 
    width: 90%; 
 
    background-color: #666633; 
 
    margin: auto; 
 
    text-align: justify; 
 
} 
 

 
.floating_right { 
 
    float: right; 
 
} 
 
.floating_left { 
 
    float: left; 
 
} 
 
.make_inline_block { 
 
    display: inline-block; 
 
} 
 
.make_block { 
 
    display: block; 
 
} 
 
.make_inline { 
 
    display: inline; 
 
} 
 
.make_margin_top { 
 
    margin-top: 10px; 
 
} 
 
.vertical_align { 
 
    vertical-align: middle; 
 
} 
 
.make_flex_align_vertical { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
/* My framework finishes */ 

<div class="bodycontainer"> 
 
    <div class="bodycontainer2"> 
 
    <div class="make_margin make_flex_align_vertical"> 
 
     <span class="floating_left"> An Interview </span> 
 
     <audio controls class="floating_right"> 
 
     <source src="audio/best.mp3" type="audio/mp3" /> 
 
     </audio> 
 
     <a class="buy_button floating_right" href="http://www.soundcloud.html">Buy Now</a> 
 
    </div> 
 
    </div> 
 
</div>

jsfiddle.

Voglio audio e buy now flottare a destra e il testo An Interview a sinistra.

Esiste un'alternativa a Float per un contenitore flessibile?

Answer 1

Sì ... E 'solo una questione di regolazione dei margini in questo modo:

.child { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #000; 
 
    margin: 5px; 
 
} 
 
.parent { 
 
    display: flex; 
 
} 
 
.child:first-of-type { 
 
    margin-right: auto; /* everything after me gets pushed to the right end*/ 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 2

.floating_left { 
    flex: 1; 
} 

.bodycontainer { 
 
    width: 100%; 
 
    background-color: #666633; 
 
    padding: 10px 0; 
 

 
} 
 
.bodycontainer2 { 
 
    width: 90%; 
 
    background-color: #666633; 
 
    margin: auto; 
 
    text-align: justify; 
 
} 
 

 
.floating_right { 
 
    float: right; 
 
} 
 
.floating_left { 
 
    flex: 1; 
 
} 
 
.make_inline_block { 
 
    display: inline-block; 
 
} 
 
.make_block { 
 
    display: block; 
 
} 
 
.make_inline { 
 
    display: inline; 
 
} 
 
.make_margin_top { 
 
    margin-top: 10px; 
 
} 
 
.vertical_align { 
 
    vertical-align: middle; 
 
} 
 
.make_flex_align_vertical { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
/* My framework finishes */ 

<div class="bodycontainer"> 
 
    <div class="bodycontainer2"> 
 
    <div class="make_margin make_flex_align_vertical"> 
 
     <span class="floating_left"> An Interview </span> 
 
     <audio controls class="floating_right"> 
 
     <source src="audio/best.mp3" type="audio/mp3" /> 
 
     </audio> 
 
     <a class="buy_button floating_right" href="http://www.soundcloud.html">Buy Now</a> 
 
    </div> 
 
    </div> 
 
</div>