CSS3 Flexbox Webkit、列流和水平滚动

Question

我有以下列表：

<ul class="contacts">
    <li>abc</li>
    <li>def</li>
    <li>ghi</li>
    <li>jkl</li>
    <li>mno</li>
    <li>pqr</li>
    <li>stu</li>
    <li>vwx</li>
    <li>yz0</li>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>

有样式

ul { display: -webkit-flex; width: 800px; height: 600px; overflow-x: scroll; -webkit-flex-direction: column; }
ul li { width: 400px; height: 200px; }

假设父容器是 800px x 600px 的固定大小，我希望内容垂直流动，然后水平流动，这样最终的布局将是：

abc  jkl  stu  123
def  mno  vwx  456
ghi  pqr  yz0  789

如何使用 (webkit) flexbox 实现这一点？一旦第三个列表项到达父容器的底部，我似乎无法让列表项流动。请注意，我想要水平滚动，因为列表中的项目数量是不确定的。

Answer 1

找到答案 - 我需要使用 -webkit-flex-flow 属性。

ul { display: -webkit-flex; width: 800px; height: 600px; overflow-x: scroll; -webkit-flex-flow: column wrap; }
ul li { width: 400px; height: 200px; }