在这里使用flexbox。在没有媒体查询的情况下按下它后,是否可以使重叠元素全宽?
参见附带的plunker:http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview 将预览窗口的大小调整为小于425px宽度。第三个元素被推下来然后我想让它全宽。当它与其他2个元素在同一行时,它不能生长。
css:
.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;
}
HTML:
<div class="flexContainer">
<div class="img">fixed size img here</div>
<div class="flexItem">This flexes</div>
<div class="wrapItem">This wraps</div>
</div>
答案 0 :(得分:10)
你做不到。但是你可以非常接近。
只需将flex项目的增长设置为一个巨大的值(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;
}
&#13;
<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>
&#13;
答案 1 :(得分:1)
您尚未通过添加UITabBarController
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;
}