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

Multiline grid with elements of same height using flexbox(使用 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 具有相同高度元素的多线网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！