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...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>
.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With