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项目的增长设置为一个巨大的值（9999），然后将包装项目增长到1

＆＃13;

 .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;

Answer 2

您尚未通过添加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;
}

JSfiddle Demo

在不使用媒体查询的情况下将弹性项目包裹起来后将其设置为全宽

2 个答案: