填充多行 flex 布局中剩余的水平空间（“flex-grow：1”不起作用）答案

【问题标题】：Fill remaining horizontal space in multirow flex layout ("flex-grow: 1" does not work)填充多行 flex 布局中剩余的水平空间（“flex-grow：1”不起作用）
【发布时间】：2021-06-11 08:35:01
【问题描述】：

想要的结果

蓝色单元格必须填充剩余的水平空间。下面的视图已通过硬编码到达。

列表和小提琴

Fiddle

<div class="PseudoTable" role="table">
  <div class="Key" role="columnheader">A</div>
  <div class="Value" role="cell">Value 1</div>
  <div class="Key" role="columnheader">AAA</div>
  <div class="Value" role="cell">Value 2</div>
  <div class="Key" role="columnheader">AAAAA</div>
  <div class="Value" role="cell">Value 3</div>
  <div class="Key" role="columnheader">AAAAAAA</div>
  <div class="Value" role="cell">Value 4</div>
</div>

.PseudoTable {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 8px;
}

.Key {
  background: #FFE082;
}

.Value {
  flex-grow: 1;
  background: #90CAF9;
}

最明显的解决方案（flex-grow: 1 for .Value）不起作用。

当前显示为：

不可接受的解决方案

请不要更改标记。在行包装器中包装每个 .Key 和 .Value 对是简单的解决方案，但如果我接受它，我没有问这个问题。多行 flex（和网格）布局概念正在避免行包装器！

【问题讨论】：

我的意思是将这一行包装到 div 中，使其成为 flex。 就像 HTML 标记一样，

A

Value 1

在css中, .PseudoTable {display:block} .d-flex{display: flex;flex-wrap: wrap;gap: 18px 8px;} 希望对你有帮助。

标签： html css flexbox

【解决方案1】：

关键是，flexbox 并不打算这样做。它的目的是在一个轴（水平或垂直）上对齐一堆盒子。有可能让对象换行到下一行，但仅此而已。

您要实现的目标是否需要一个行元素，以便每一对都可以在全宽的基础上工作。

但是，你想要做的实际上是可行的……好旧的浮动。

.PseudoTable {
  width: 300px;
}

.Key {
  background: #FFE082;
  float: left;
  clear: left;
  margin-right: 8px;
}

.Value {
  background: #90CAF9;
  overflow: auto;
  margin-bottom: 18px;
}

<div class="PseudoTable" role="table">
  <div class="Key" role="columnheader">A</div>
  <div class="Value" role="cell">Value 1</div>
  <div class="Key" role="columnheader">AAA</div>
  <div class="Value" role="cell">Value 2</div>
  <div class="Key" role="columnheader">AAAAA</div>
  <div class="Value" role="cell">Value 3</div>
  <div class="Key" role="columnheader">AAAAAAA</div>
  <div class="Value">Value 4</div>
</div>

但请注意，这有很多警告，如果要更改内容，可能会表现不佳。检查如果将lipsum 放在Key 或Value 单元格中会发生什么。

【讨论】：

我会将clear:left添加到密钥中，即使内容发生变化也不会有任何问题
感谢您的解决方案！

【解决方案2】：

你想要的布局不能单独使用flex-grow，因为这个属性只消耗可用空间。这是考虑所有其他长度后剩余的空间。

那么为什么其他元素在不需要时会换行呢？正如您在示例中所示，行上有空间供他们使用：

网格布局也不是一个简单的解决方案，因为第一列将采用最长项目的宽度。您将需要创建多个列和目标跨度。变得复杂。

.PseudoTable {
  width: 300px;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 18px 8px;
}

.Key {
  background: #FFE082;
}

.Value {
  background: #90CAF9;
}

<div class="PseudoTable" role="table">
  <div class="Key" role="columnheader">A</div>
  <div class="Value" role="cell">Value 1</div>
  <div class="Key" role="columnheader">AAA</div>
  <div class="Value" role="cell">Value 2</div>
  <div class="Key" role="columnheader">AAAAA</div>
  <div class="Value" role="cell">Value 3</div>
  <div class="Key" role="columnheader">AAAAAAA</div>
  <div class="Value" role="cell">Value 4</div>
</div>

我认为您需要一个 (JavaScript) 解决方案来计算 .Key 元素的宽度，然后从全宽 .Value 元素和您拥有的任何边距中减去它。

【讨论】：