使用flexbox的具有相同高度的元素的多线网格 [英] Multline 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.

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

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 ?

解决方案

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

I'll cite the W3C spec:

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. [...]

(From 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.

Terminology of the above quote:

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

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