在固定高度的容器中，将浮动的div从上到下排列，然后从左到右排列。

Question

我正在尝试在固定高度的容器中从上到下、从左到右地垂直浮动DIV。在Vetically floating DIV arrange from up to down by rows中提出了同样的问题，并且已经给出了解决方案，其中div的大小为高：宽比例为1:1。在我的情况下，每个div都是一个长方形，正如预期的那样，在上述帖子中解释的解决方案会出现问题。

我能够找到另一种解决方案，使用一个名为flex columns的新的CSS属性。下面给出的样式可以完成任务，但在旧版本的webkit中不起作用。

<style>
.container {
    display:flex;
    flex-direction:column;

}
.area {
    width:200px;
    height:100px;
}
</style>

<div class="container">
    <div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
    <div class="area">area6</div>
</div>

我的计划结果应该是这样的：

    ---------------------------->
    | -------- --------
    | |Area 1| |Area 5|
    | -------- --------
    | -------- --------
max | |Area 2| |Area 6|
500 | -------- --------
 px | --------
    | |Area 3|   etc..
    | --------
    | --------             /\
    | |Area 4|   etc....... |
    | --------   
    --------------------------->

• 列表中的项目数量是任意的。随着项目数量的增加，它应该横向增长。
• 我的问题是：我们是否可以有任何解决方案适用于旧版本的webkit。我不需要适用于所有浏览器的解决方案。我的产品专用于webkit。
• 或者如果有人能够提供修改重复帖子中提到的解决方案的指针，那将非常有帮助。

- qwerty123

---

id 应该是唯一的。 - Pranav C Balan

可能是css flexbox break parent by screen width的重复问题。 - cimmanon

@cimmanon 我不确定这个能否被修改以适应我的需求。帖子中的排序似乎是从左到右，然后从上到下。我需要的是相反的情况。另外，我寻找另一个解决方案的原因是display:flex在Jelly Bean Android的webkit中不起作用。 - qwerty123

@Arun 看一下答案的第二部分。 - cimmanon

@cimmanon，我尝试过几个组合，但是它始终无法工作。http://jsfiddle.net/Cu8m4/ 你能看一下吗？ - qwerty123

Answer 1

这应该能给你想要的东西。

.container {
    display:flex;
    flex-flow:column wrap;
    max-height:500px;
    background:#ccc;
}
.area {
    width:200px;
    height:100px;
    background:#444;
    margin: 1px;
}

<div class="container">
    <div class="area">area1</div>
    <div class="area">area2</div>
    <div class="area">area3</div>
    <div class="area">area4</div>
    <div class="area">area5</div>
    <div class="area">area6</div>
</div>

我添加了颜色以便更好地看清楚我正在处理的内容。

- Pixel Rubble