示例代码: https://jsfiddle.net/z7ybks9u/2/
动机:我想强制 3 列布局,支持固定宽度但可变高度的 DIVS,布局效率不会暴露大的“空白孔” “之间的元素。由于元素的数量未知,我无法限制 flex 容器的高度。
问题:在不强制调整 flex 容器高度的情况下,我无法看到超过一列,因为它只是利用了将所有元素放入一列所需的垂直空间。
我被迫做的事情:
gallery-height {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: center;
max-height: 700px; <----- NEED TO DO THAT TO SEE COLUMNS BUT I HAVE TO SUPPORT UNKNOWN NBR OF ELEMENTS
}
最佳答案
放弃 Flex 容器以支持 column-count
可能会有所帮助:https://jsfiddle.net/69nmwqag/
.gallery-height {
column-count: 3;
}
然后我将 width: 30%;
放在 .img
上。
关于html - CSS flex column wrap with no height preset and forcing of number of columns,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54894226/