Gibt es eine Alternative zu "Float" für einen Flex-Container?

Question

Kürzlich habe ich festgestellt, dass float: right/left nicht auf einem untergeordneten Element funktioniert, wenn der übergeordnete Container display: flex hat. Ich möchte, dass einige der untergeordneten Elemente genau wie bei float: right nach rechts geschoben werden.

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

Ich möchte audio und buy now nach rechts schweben und den Text An Interview nach links schweben.

Gibt es eine Alternative zu Float für einen Flex-Container?

Answer 1

Ja ... es ist nur eine Frage Ränder der Einstellung wie folgt:

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