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

Question

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

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

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

Answer 1

不，纯CSS / flexbox无法实现这一点。

我会引用W3C规范：

  

当弹性容器有多条线时，每条线的交叉大小是包含线上的弹性项所需的最小尺寸（由于align-self导致的对齐）和线条在flex容器中使用align-content属性对齐。 [...]

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

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

上述引言的术语：

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

Answer 2

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

来实现这一点

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

这并不强制列表项具有特定显示，因此项可以是block，flex，inline-block（如上例所示）。< / p>

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

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中的更多信息。）