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

Question

这里使用flexbox。是否可以在没有媒体查询的情况下将重叠元素向下推后变为全宽？

见附件插件：http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview 将预览大小 window 调整为小于 425 像素宽度。第三个元素被向下推，然后我想让它全宽。当它与其他 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

你不能那样做。但是你可以很接近。

只需将弹性项目的增长设置为一个巨大的值 (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>

Answer 2

你还没有告诉那个元素它可以通过添加 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 Demo

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

Make flex item full width after it's been wrapped without using media queries

css

flexbox