Is there any alternative to "Float" for a flex container?

Question

Recently I noted that float: right/left doesn't work on a child element when the parent container has display: flex. I want some of the child elements to be pushed towards the right just as we do 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 to float right and the text An Interview to float left.

Is there any alternative to Float for a flex container?

Yes, [**floats are ignored in a flex formatting context**](https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/#flex-containers). The flex alternative is [**auto margins**](http://stackoverflow.com/a/33856609/3597276). — Michael Benjamin, Mar 27 '16 at 13:05

Paulie_D · Accepted Answer · 2016-03-27T08:45:58.800

10

Yes...it's just a matter of adjusting margins like so:

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

edited Mar 27 '16 at 08:45

answered Mar 27 '16 at 08:38

Paulie_D

107,962
13
142
161

score 2 · Answer 2 · answered Mar 27 '16 at 09:55

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

Is there any alternative to "Float" for a flex container?

2 Answers2