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

【问题标题】：Make flex item full width after it's been wrapped without using media queries在不使用媒体查询的情况下包装弹性项目后使其全宽
【发布时间】：2016-01-15 09:53:34
【问题描述】：

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

见附件：http://plnkr.co/edit/mxACfJ2VR5yNgP9j8WJh?p=preview 将预览窗口的大小调整为小于 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>

【问题讨论】：

如果没有媒体查询，弹性项目不知道它正在包装。它不知道原始代码之外的任何内容。那么为什么它会在包装上改变呢？我相信您的问题的答案是否定的。

标签： css flexbox

【解决方案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 Demo

【讨论】：

问题是：当它与其他 2 个元素在同一行时，它不能增长。 ...当您添加 flex-grow: 1 时，.wrapItem 会增长屏幕会扩大，即使与兄弟在同一行。

【解决方案2】：

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

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

【讨论】：

不错！ :) 也许我错过了一些东西，但对我来说它看起来不是很接近，但正是我想要的。谢谢！就像那些小 CSS hack :)
好吧，当 flexItem 增长时，wrapItem 也在增长（您的要求是它不应该增长。但是，对于每 10000 个可用像素，一个需要 9999，另一个需要 1。所以大小wrapItem 最终会从 100 像素变为 101 像素（在非常大的屏幕上）
flex-grow实际上是元素相对于其余元素的增长速度。带有flex-grow: 5 的元素的增长速度是带有flex-grow: 1 的元素的5 倍。