gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 01:01:57 25 4
gpt4 key购买 nike

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

这是我正在尝试做的一个例子:http://jsbin.com/maxavahesa/1/edit?html,css,output

在这个例子中,我想要我所有的 <li>具有相同的高度,这意味着最大元素的高度(在我的示例中,这将是最后一个 <li> )。是否可以用 flexbox 实现?

最佳答案

不,这对于纯 CSS/flexbox 是不可能的。

我将引用 W3C 规范:

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)

因此,一个元素只会扩展到它当前所在行的最大高度。

上述引用的术语:

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

关于css - 使用 flexbox 具有相同高度元素的多线网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27600059/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com