html - CSS flex column wrap with no height preset and forcing of number of columns

Question

示例代码: 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
    }

Answer 1

放弃 Flex 容器以支持 column-count 可能会有所帮助:https://jsfiddle.net/69nmwqag/

.gallery-height {
  column-count: 3;
}

然后我将 width: 30%; 放在 .img 上。