效果图
代码实现
核心代码
.box {
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow-x: scroll;
}
.item {
width: 100px;
height: 100px;
flex: 0 0 auto;
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
margin: 80px auto;
background-color: #ccc;
width: 350px;
background-color: gainsboro;
display: flex;
align-items: center;
flex-wrap: nowrap;
overflow-x: scroll;
}
.item{
width: 100px;
height: 100px;
flex: 0 0 auto;
line-height: 100px;
text-align: center;
color: #fff;
}
.item1{
background-color: #cf2424;
}
.item2{
background-color: #cf9324;
}
.item3{
background-color: #8dcf24;
}
.item4{
background-color: #24cfaa;
}
.item5{
background-color: #2432cf;
}
.item6{
background-color: #cf24b5;
}
</style>
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>
