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

Question

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

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

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

Answer 1

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

我会引用W3C规范：

当Flex容器有多条线时，每条线的交叉大小是在线上包含弹性项所需的最小尺寸（由于align-self引起的对齐），并且线在flex容器内对齐 - 内容属性。 [...]

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

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

以上引用的术语：

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

Answer 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（如上例所示）。

只需使用以下命令定义列表（容器）：

1. display: grid（将使用网格布局）;
2. grid-template-columns: repeat(4, 1fr)（假设你想要每行4列）;
3. grid-auto-rows: 1fr（fr是灵活因子，值1表示列表中所有项目的最大大小; https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows中的更多信息）。