使用 flexbox 具有相同高度元素的多线网格

Posted 2023-03-06

【中文标题】使用 flexbox 具有相同高度元素的多线网格

【英文标题】：Multiline grid with elements of same height using flexbox

【发布时间】：2015-02-20 09:31:49

【问题描述】：

我正在尝试创建一个包含多行和多列的网格。我希望它们都使用 flexbox 具有相同的高度，但我唯一能得到的是在一行上具有相同大小的列。

这是我正在尝试做的一个示例：http://jsbin.com/maxavahesa/1/edit?html,css,output

在本例中，我希望我的所有 <li> 具有相同的高度，这意味着最大项目的高度（在我的示例中，这将是最后一个 <li>）。是否可以使用 flexbox 实现？

【问题讨论】：

您能否详细说明一下该网格应该如何工作？每个盒子的内容会有所不同吗？是否总是只有一项内容更多？可以给ul 一个固定的高度吗？您的示例已大大简化，因此仅说“不，这不可能是正确的，但没有帮助”。

我希望我的所有元素都具有相同的高度（这意味着它们中最大的元素的高度），无论使用什么内容。

You expect the boxes to have the same height as the highest box even if the viewport is smaller?.

说实话，我并不真正关心视口。我唯一的愿望是所有<li> 都具有相同的高度，即使它们不在同一行。我知道用 JS 很容易实现，但我想知道 flexbox 是否也可以提供解决方案。

另外值得注意的是：我不想为此诉诸min-height。

【参考方案1】：

不，这对于纯 CSS/flexbox 是不可能的。

我将引用 W3C 规范：

当一个 flex 容器有多行时，每行的交叉尺寸是包含该行上的 flex 项目所需的最小尺寸（由于 align-self 对齐后），并且行使用 align-content 属性在 flex 容器内对齐。 [...]

（来自http://www.w3.org/TR/css3-flexbox/#flex-lines）

因此，一项仅扩展至当前所在行的最大高度。

上述引用的术语：

（来自http://www.w3.org/TR/css3-flexbox/#box-model）

【讨论】：

谢谢！我想我会坚持我的 JS 解决方案。

【参考方案2】：

虽然这个话题很老，但对于现在看到这个话题的任何人来说，你都无法使用 flexbox 来实现这一点，就像在接受的答案中所说的那样；但是，您可以通过 Grid Layout 实现这一目标：

* 
  box-sizing: border-box;  


ul 
  margin: 0;
  padding: 0;
  font-size: 0;
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 1px;
  grid-row-gap: 1px;


li 
  display: inline-block;
  font-size: 16px;
  background: grey;
  border: 1px solid white;

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum et rerum labore repellat voluptatibus ut sit deserunt facilis dolorum exercitationem earum quibusdam quo itaque distinctio magnam, accusantium soluta voluptates aut.</li>
</ul>

虽然这不是 flexbox，但它的行为方式非常相似，而且非常易于使用。

这不会强制列表项具有特定显示，因此这些项可以是 block、flex、inline-block（如上例所示）。

只需定义列表（容器）：

display: grid（将使用网格布局）； grid-template-columns: repeat(4, 1fr)（假设您希望每行 4 列）； grid-auto-rows: 1fr（fr 是弹性因子，值为 1 表示列表中所有项目的最大大小；更多信息在 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows）。