灵活容器的“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>

Answer 2

.floating_left {
  flex: 1;
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;