灵活容器的"Float"有什么替代品吗？

Question

最近我注意到,float: right/left当父容器有子元素时,它不起作用display: flex.我想让一些子元素像我们一样被推向右边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向左浮动.

对于Flex容器,还有浮动替代方案吗？

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>