Gần đây tôi đã lưu ý rằng float: right/left
không hoạt động trên phần tử con khi vùng chứa chính có display: flex
. Tôi muốn một số yếu tố con được đẩy về phía bên phải giống như chúng ta làm với float: right
.Có cách nào thay thế cho "Float" cho thùng chứa flex không?
.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>
Tôi muốn audio
và buy now
để thả nổi bên phải và văn bản An Interview
để thả sang trái.
Có cách nào thay thế Float cho hộp chứa flex không?
Vâng, [** nổi bị bỏ qua trong ngữ cảnh định dạng flex **] (https://www.w3.org/TR/2016/CR-css-f lexbox-1-20160301/# flex-containers). Thay thế flex là [** tự động lề **] (http://stackoverflow.com/a/33856609/3597276). –