在不使用媒体查询的情况下将弹性项目包装后的全宽度

Question

在这里使用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>

Answer 1

你不能这样做。 但你可以非常接近。

只需将flex项目上的grow设置为一个巨大的值（9999），然后将wrap项目增长为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> 

Answer 2

你没有通过添加flex-grow:1告诉那个元素允许它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演示