包裝時如何制作不同尺寸的彈性物品以填充父物品

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％。

如果這是該行中的唯一項目，我想shorter填充整個行。

沒有媒體查詢是否可以實現？

柱塞鏈接

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> 

Answer 2

將其設為flex: 2 0和flex: 1 0小數的flex-grow或flex-shrink只會在flex軸上 彎曲一小部分可用空間。 請參見下面的演示：

 body { display: flex; } #row { flex: 1 0; display: flex; flex-wrap: wrap; } #longer { flex: 2 0; background-color: lightgreen; } #shorter { flex: 1 0; background-color: lightblue; } 

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