我知道如何在单行中使用元素进行简单的水平滚动。
单行演示:http://jsfiddle.net/YbrX3/1504/
但是,我如何使用CSS实现多行元素滚动,就像这样:
1 | 3 | 5 | 7 | 9
---------------------------
2 | 4 | 6 | 8 | 10
我知道如何在单行中使用元素进行简单的水平滚动。
单行演示:http://jsfiddle.net/YbrX3/1504/
但是,我如何使用CSS实现多行元素滚动,就像这样:
1 | 3 | 5 | 7 | 9
---------------------------
2 | 4 | 6 | 8 | 10
以下是一个使用 flexbox
的解决方案-将此样式添加到scrolls
中:
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 160px;
我将scrolls
的高度加倍并设置了column
的flex-direction。使用wrap即可获得所需的布局。
请见下方片段:
.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>
请告诉我您对此的反馈。谢谢!