垂直环绕的实现方式与水平环绕类似

Question

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

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

我正在尝试使用CSS列，但没有成功。我只想为列定义一个固定的宽度，而不想设置指定数量的列。它应该是动态的，并取决于容器的高度。我想这段代码已经非常接近了：

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

“我所需要做的就是以某种方式定义column-count属性，但我不知道怎么做。”

“或者，有比使用CSS列更好的方法吗？”

- tom

---

目前浏览器还不支持列。http://caniuse.com/#search=column - Vlad DX

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - CBroe

Answer 1

如果您的容器高度固定，最好使用flexbox。因此，代码应如下所示：

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

@CBrow在上面发布了一个非常好的链接，就像flex box的备忘单一样，阅读更多内容并查看您可以使用什么。

- Whip

Answer 2

感谢VeeK和CBroe，我尝试了flexbox，但无法以我想要的方式使其正常工作。这是我能够达到的最接近的效果：

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;
}

<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>

问题：1. 它不应该水平对齐。2. 它应该适用于具有动态高度的容器。

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

- tom

---

使用align-content: flex-start;而不是align-items可以在左侧获得三个窄列。什么应该决定容器的高度？ - woestijnrog

谢谢，align-content: flex-start; 解决了对齐问题。我已经扩展了fiddle，以展示容器的高度是如何确定的。在我的布局中，它也有一个容器（fiddle中的div1），其高度是定义好的，并且应该填充其中的剩余空间。因此，这些项目（蓝色小方块）应该在垂直方向上扩展，直到填满其容器中的所有空间。当第一列不能再容纳更多项目时，就会发生第一个换行，然后下一个项目进入下一列。 - tom

是的，应该是17.5em。在这个例子中很清晰；我们可以自己计算剩余的高度并将其作为额外规则添加进去。但我猜你想要一个动态的解决方案？类似于 height: calc(100% - 10em); 这样对于你的 div.container？ - woestijnrog

任何已经支持flexbox的浏览器也支持calc，所以我想这就是解决方案。我认为“我们在这里做的事情”已经很好地阐述了我的垂直换行问题，所以如果你所有的帮助都能放在一个答案中，我可以接受它。 - tom

我确实尝试过，但后来我决定将其删除，因为我的情况非常特殊。在尝试了calc()之后，我惊讶地发现它在任何现代浏览器中都能完美运行，即使在我的情况下，我通过JS来操作高度并进行计算。所以是的...你在回答中总结得很好，它完美地运行着 :) - tom

Answer 3

我们希望将我们的div以列的方式布局，所以我们使用flex-direction: column;。 我们不希望只有一个大列，而是允许换行，所以我们使用flex-wrap: wrap;。 为了将所有的列都靠左对齐，我们使用align-content: flex-start;。 我们必须避免我们的div无限增长，就像默认情况下的高度一样，所以我们需要以某种方式限制高度。高度是容器中其他div下方剩余的空间⇒height: calc(100% - 10em);。

在this fiddle中将所有内容放在一起。

- woestijnrog