html - 包装时如何制作不同大小的 flex 元素以填充父级

Question

我有以下模板:

<div id="row">
  <div id="longer"></div>
  <div id="shorter"></div>
</div>

当它们在同一行时，我希望 longer 的宽度是 shorter 的两倍，所以我应用了以下 CSS:

#row {
  display: flex;
  flex-wrap: wrap;
}

#longer {
  flex: 1 0;
}

#shorter {
  flex: 0.5 0;
}

这看起来工作正常，但是当 shorter 被包裹时，它只占用新行的 50%，即使它是该行中的唯一元素。

如果它是该行中的唯一元素，我希望更短来填充整行。

这是否可以在没有媒体查询的情况下实现？

Plunker link

Answer 1

如果子元素的 flex-grow 值之和小于 1，则它们不会填充整个父元素的宽度，而只会填充相应的分数。

您可以将它们乘以相同的比例，使它们至少为 1:

#row {
  display: flex;
  flex-wrap: wrap;
}

#longer {
  flex: 2 0;
}

#shorter {
  flex: 1 0;
}


/* Just for demo */

#row div {
  white-space: nowrap;
}

#row div:nth-child(1) {
  background: green;
}

#row div:nth-child(2) {
  background: red;
}

<div id="row">
  <div id="longer">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div id="shorter">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>