时间戳

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

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

问题描述

期望的结果

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

在此处输入图像描述

上市和小提琴

小提琴

<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: 1for .Value）不起作用。

当前显示为：

在此处输入图像描述

不可接受的解决方案

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

标签： htmlcssflexbox

解决方案

关键是，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 单元格会发生什么。

推荐阅读