Is there an alternative to float for a flexible container?

Question

I recently noticed that float: right/left does not work on a child when the parent container has display: flex . I want some children to be shifted to the right, just like we are with 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

I want audio and buy now float to the right and An Interview text to the left.

Is there an alternative to float for flex container?

Answer 1

Yes ... it's just a matter of adjusting the fields:

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