Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

flexbox

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?

like image 914
user31782 Avatar asked Mar 27 '16 08:03

user31782


2 Answers

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>
like image 114
Paulie_D Avatar answered Oct 24 '22 05:10

Paulie_D


.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>
like image 38
Felix A J Avatar answered Oct 24 '22 05:10

Felix A J