包裹后，不使用媒体查询，使弹性项目全宽 [英] Make flex item full width after it's been wrapped without using media queries
问题描述
在此处使用flexbox.在没有媒体查询的情况下，是否可以使重叠元素全宽?
Using flexbox here. Is it possible to make overlapping element full width after it has been pushed down without media queries?
请参阅随附的插件: http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview 将预览窗口调整为小于425px的宽度.将第三个元素下推，然后将其设为全宽.当它与其他2个元素在同一行时，它一定不能增长.
See attached plunker: http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview Resize preview window to less than 425px width. Third element get's pushed down and then I want to make it full width. When it is in the same line as other 2 elements it must not grow.
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>
推荐答案
您不能这样做.但是你可以近距离接触.
You can not do that. But you can get pretty close.
只需将flex项目的增长设置为一个巨大的值(9999)，然后将wrap项目的增长设置为1即可.
Just set the grow on the flex item to a huge value (9999) and grow on the wrap item to 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>
这篇关于包裹后，不使用媒体查询，使弹性项目全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
