css横向滚动的实现方式
css横向滚动的实现方式,分别是:
1.grid+white-space: nowrap+overflow-x: auto
2.flex+overflow-x: auto
公共代码:
html:
<div class="section"> <div class="section_item">Item 1</div> <div class="section_item">Item 2</div> <div class="section_item">Item 3</div> <div class="section_item">Item 4</div> <div class="section_item">Item 5</div> </div>
css:
.section { width: 750px; margin: 0 auto; } .section_item { text-align: center; line-height: 100px; } .section_item:nth-child(1) { background: #F1C2C6; } .section_item:nth-child(2) { background: #DAC2F1; } .section_item:nth-child(3) { background: #CCF1C2; } .section_item:nth-child(4) { background: #DAC2F1; } .section_item:nth-child(5) { background: #F1C2C6; }
1.grid+white-space: nowrap+overflow-x: auto
css:
.section { display: grid; grid-template-columns: repeat(5,300px); grid-auto-rows: 100px; white-space: nowrap; overflow-x: auto; }
2.flex+overflow-x: auto
.section { display: flex; overflow-x: auto; } .section_item { flex-shrink: 0; flex-basis: 280px; }
效果:
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/711
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!