2

我有以下列表:

<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 实现这一点?一旦第三个列表项到达父容器的底部,我似乎无法让列表项流动。请注意,我想要水平滚动,因为列表中的项目数量是不确定的。

4

1 回答 1

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; }
于 2012-10-09T10:44:09.007 回答