複数行のCSS水平スクロールの仕方は？

Question

すべての要素が1行にある単純な水平スクロールを行う方法を理解しています。

シングルラインのデモ：http://jsfiddle.net/YbrX3/1504/

どのように私のようなので、CSSで複数行の要素のスクロールを行うことができておりますが：ここ

1 | 3 | 5 | 7 | 9 
--------------------------- 
2 | 4 | 6 | 8 | 10 

Answer 1

がflexboxを使用したソリューションである - scrollsにこのスタイルを追加しました：

display: flex; 
flex-direction: column; 
flex-wrap: wrap; 
height: 160px; 

私はscrollsの高さを倍増し、それをを与えました0フレックス方向。ラッピングすると、必要なレイアウトが得られます。以下

参照スニペット：

.wrapper { 
 
    background: #EFEFEF; 
 
    box-shadow: 1px 1px 10px #999; 
 
    margin: auto; 
 
    text-align: center; 
 
    position: relative; 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    border-radius: 5px; 
 
    margin-bottom: 20px !important; 
 
    width: 100%; 
 
    padding-top: 5px; 
 
} 
 
.scrolls { 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 160px; 
 
    white-space: nowrap 
 
} 
 
.scrolls div { 
 
    padding: 20px; 
 
    box-shadow: 1px 1px 10px #999; 
 
    margin: 2px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div class="wrapper"> 
 
    <div class="scrolls"> 
 
    <div> 
 
     1 
 
    </div> 
 
    <div> 
 
     2 
 
    </div> 
 
    <div> 
 
     3 
 
    </div> 
 
    <div> 
 
     4 
 
    </div> 
 
    <div> 
 
     5 
 
    </div> 
 
    <div> 
 
     6 
 
    </div> 
 
    <div> 
 
     7 
 
    </div> 
 
    <div> 
 
     8 
 
    </div> 
 
    <div> 
 
     9 
 
    </div> 
 
    <div> 
 
     10 
 
    </div> 
 
    <div> 
 
     11 
 
    </div> 
 
    <div> 
 
     12 
 
    </div> 
 
    <div> 
 
     13 
 
    </div> 
 
    <div> 
 
     14 
 
    </div> 
 
    </div> 
 
</div>

は、私はこれについてあなたの意見を知ってみましょう。ありがとう！