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

親コンテナが800pxx600pxの固定サイズであると仮定して、コンテンツを垂直方向に流し、次に水平方向に流して、最終的なレイアウトが次のようになるようにします。

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

（webkit）フレックスボックスでこれを達成するにはどうすればよいですか？3番目のリストアイテムが親コンテナの一番下に到達すると、リストアイテムをフローさせることができないようです。リスト内の項目数は不定ですので、横スクロールをお願いします。

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 に答える