在这里使用flexbox。是否有可能使重叠元素在没有媒体查询的情况下被推下后全宽?
见附柱塞:https://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview
调整预览窗口的宽度小于425px。第三个元素被下压然后我想把它设为全宽。当它与其他2个元素在同一行时，它不能增长。
.flexContainer {
display: flex;
flex-wrap: wrap;
border: 1px solid;
}
.img {
width: 110px;
height: 110px;
background: red;
}
.flexItem {
flex-basis: 200px;
flex-grow: 1;
background: #ff1;
}
.wrapItem {
flex-basis: 100px;
background: #aab;
}<div class="flexContainer">
<div class="img">fixed size img here</div>
<div class="flexItem">This flexes</div>
<div class="wrapItem">This wraps</div>
</div>你不能那样做。但是你可以很接近。
将伸缩项的生长设置为一个很大的值(9999)，并将换行项的生长设置为1
.flexContainer {
display:flex;
flex-wrap:wrap;
border: 1px solid;
}
.img {
width:110px;
height:110px;
background:red;
}
.flexItem {
flex-basis:200px;
flex-grow:9999;
background:#ff1;
}
.wrapItem {
flex-basis:100px;
flex-grow:1;
background:#aab;
} <body>
<div class="flexContainer">
<div class="img">fixed size img here</div>
<div class="flexItem">This flexes</div>
<div class="wrapItem">This wraps</div>
</div>
</body>您没有告诉该元素允许通过添加flex-grow:1
.flexContainer {
display:flex;
flex-wrap:wrap;
border: 1px solid;
}
.img {
width:110px;
height:110px;
background:red;
}
.flexItem {
flex-basis:200px;
flex-grow:1;
background:#ff1;
}
.wrapItem {
flex-grow:1;
flex-basis:100px;
background:#aab;
}<div class="flexContainer">
<div class="img">fixed size img here</div>
<div class="flexItem">This flexes</div>
<div class="wrapItem">This wraps</div>
</div>JSfiddle演示/strong>