<!-- 宫格 -->
<div class="GongGe">
<ul>
<li v-for="(item, index) in 9" :key="index">{{ index }}</li>
</ul>
</div>
<!-- /宫格 -->
// 宫格
.GongGe {
width: 750px;
overflow-x: auto;
ul {
width: 1440px;
display: flex;
flex-direction: row;
li {
// overflow-x: hidden;
// ov erflow: hidden;
width: 160px;
height: 160px;
background-color: pink;
}
}
}
// /宫格结束
A.必须先准备一个父容器和 一个需要滚动的子盒子(因为子盒子比父盒子更高,或者更宽,才能实现滚动)
B.给父容器设置一个固定的高度或者宽度(一定不要让父盒子被子盒子撑开)
C.父容器如果想要设置上下滚动,添加属性overflow-y:auto,如果想要设置左右滚动,添加属性overflow-x:auto