垂直包裹就像它水平工作一样

Question

我有一个div容器（浅绿色的容器）里面有较小的div（蓝色容器），我想对齐它们，如图所示。

就像默认的水平换行一样，但是＆＃34;旋转90度＆＃34;。

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

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

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

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

Answer 1

如果你有一个固定的高度，你最好的选择是在你的容器上使用flexbox。所以代码看起来像这样

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

@CBrow上面发布了一个很棒的链接，就像弹性盒的备忘单，阅读更多内容，看看你能用什么

Answer 2

感谢VeeK和CBroe，我尝试过flexbox，但我无法按照我想要的方式工作。这是我能得到的最接近的：

＆＃13;

＆＃13;

div.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 25em;
    height: 17.5em;
    background-color: #dfffbf;
}
div.item {
    display: inline-block;
    margin: 1em 0 0 1em;
    width: 2em;
    height: 2em;
    font-family: sans-serif;
    line-height: 2em;
    text-align: center;
    color: #ffffff;
    background-color: #729fcf;
}

＆＃13;

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
    <div class="item">13</div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题：1。不应该横向证明这一点。 2.它应该与具有动态高度的容器一起使用。

...就像浏览器通常做的正常水平流一样，只是垂直方式。

Answer 3

• 我们希望我们的div在列中排列，因此我们使用flex-direction: column;。
• 我们不想要一个大的列但允许包装，所以我们使用flex-wrap: wrap;。
• 要将我们的所有列分组到左侧，我们使用align-content: flex-start;。
• 我们必须避免我们的div无限增长，就像默认高度一样，所以我们需要以某种方式限制高度。高度是容器中剩余的空间，位于另一个div height: calc(100% - 10em);。
之下

this fiddle中的所有内容。