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填满整个行。

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

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>

Answer 2

将其设置为flex: 2 0和flex: 1 0-小数flex-grow或flex-shrink只会 flex 一个 fraction 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>

包装时如何制作不同尺寸的弹性物品以填充父物品

2 个答案: