时间戳

首页 > 解决方案 > 包装时如何制作不同大小的弹性项目以填充父项

html - 包装时如何制作不同大小的弹性项目以填充父项

问题描述

我有以下模板：

<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 链接

标签： htmlcssflexbox

解决方案

如果孩子的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>

推荐阅读