使用Flexbox具有相同高度的元素的多行网格 [英] Multiline grid with elements of same height using flexbox

问题描述

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

I'm trying to create a grid which will have multiple row and columns. I'd like them all to have the same height using flexbox, but the only thing I can get is columns of same size on one row.

以下是我要执行的操作的示例: http://jsbin.com/maxavahesa/1/edit?html,css,output

Here is an example of what I'm trying to do: http://jsbin.com/maxavahesa/1/edit?html,css,output

在此示例中，我希望所有<li>都具有相同的高度，这意味着最大项目的高度(在我的示例中，这将是最后一个<li>). flexbox是否可以实现?

In this example I'd like all my <li>'s to have the same height, which means the height of the biggest item (in my example, this would be the last <li>). Is it possible to achieve with flexbox ?

推荐答案

否，使用纯CSS/flexbox无法做到这一点.

No, this is not possible with pure CSS/flexbox.

我将引用W3C规范:

当flex容器有多行时，每行的交叉尺寸是在该行上包含flex项所需的最小尺寸(由于align-self导致的适应性)，以及这些行在flex容器内使用align-content属性对齐. [...]

When a flex container has multiple lines, the cross size of each line is the minimum size necessary to contain the flex items on the line (after aligment due to align-self), and the lines are aligned within the flex container with the align-content property. [...]

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

因此，一项只会扩展到当前所在行的最大高度.

So, one item is only expanded to the maximum height of that line it's currently on.

以上引用的术语:

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

这篇关于使用Flexbox具有相同高度的元素的多行网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！