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

时间:2015-10-16 15:16:44

标签: css css3 flexbox

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

2 个答案:

答案 0 :(得分:10)

你做不到。但是你可以非常接近。

只需将flex项目的增长设置为一个巨大的值(9999),然后将包装项目增长到1

&#13;
&#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;
&#13;
&#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;
}

JSfiddle Demo