html - 垂直换行就像它水平工作一样

Question

我有一个 div 容器(浅绿色的)，里面有较小的 div(蓝色的)，我想将其对齐，如图所示。

就像默认的水平换行一样，但“旋转了 90 度”。

我在玩弄 CSS columns没有成功。我只想为列定义一个固定宽度，不想设置指定的列数。它应该是动态的并且取决于容器的高度。我想这段代码非常接近:

div.container {
    column-width: some length;
    column-fill: auto;
}

我所要做的就是以某种方式定义 column-count 属性，但我不知道如何定义。

或者有比 CSS 列更好的方法吗？

Answer 1

如果容器的高度固定，最好的办法是在容器上使用 flexbox。所以代码看起来像这样

div.container{
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   height: 500px; //Whatever height you want
}

@CBrow 在上面发布了一个很棒的链接，这就像一个 flex box 的备忘单，阅读更多内容，看看您可以使用什么