需求是這樣的實現兩排滑動，裏面元素數量不定，樣式如下；
看到兩排滑動我就直接想到了用大div套中兩個元素，然後向右自然排列，類似於這樣：
但是這樣雖然能實現樣式，卻不能很方便的循環填充數據。所以我就放棄了這個方法，這時候我想到了flex，因爲平時用的flex橫向排列居多，所以抱着嘗試的心態用flex屬性排列。沒想到很簡單的實現了需求，果然flex很強大。
思路是這樣的。先固定父元素高度，然後用flex縱向排列（ flex-direction: column;）。然後子元素高度設置爲父元素一半，這樣一縱列只能放下兩個元素，然後超出換行 （flex-wrap: wrap;），元素就自動向右排列了。
demo如下：
<style>
*{
padding: 0;
margin: 0;
}
.a{
background-color: #fdb15b;
width: 81px;
margin-right: 20px;
height:41%;
margin-bottom:2%;
list-style-type: none;
display: inline-block;
border-radius: 5px;
}
ul{
display: flex;
height: 260px;
flex-direction: column;
flex-wrap: wrap;
}
div{
width: 90%;
overflow: scroll;
margin:50px auto;
}
</style>
<body>
<div>
<ul>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
<li class="a"></li>
</ul>
</div>
</body>