フレックスコンテナの「フロート」に代わる方法はありますか？

Question

最近、親コンテナのサイズがdisplay: flexの場合、float: right/leftは子要素では機能しません。 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。

audioとbuy nowを右に浮かべて、テキストAn Interviewを左に浮かせたいです。

フレックスコンテナのフロートの代替手段はありますか？

Answer 1

はい...それはそうのような余白を調整するだけです：

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