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

CSS3 Flexbox Webkit，列流和水平滚动

1 个答案: