使用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)