css滑动自动铺满

CSS可以帮助我们实现很多在过去只有JS才能实现的效果，其中就包括滑动自动铺满的效果。

.container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.item {
scroll-snap-align: start;
flex: 0 0 100%;
}

以上代码可以让一个容器内的子元素实现自动滑动，并且在滑动到容器尽头时自动铺满容器。

容器需要设置display为flex，子元素的宽度为100%的情况下flex-grow: 1是不够的，因为这样只能将空白部分填充满而不能实现滑动，所以需要设置 overflow-x: auto，使容器出现滚动条。

接着就可以使用scroll-snap-type属性让子元素滑动时吸附到容器边缘，而scroll-snap-align属性则是指定吸附到哪个位置，这里我们选择start，即吸附到子元素的左侧。

正如上面代码中设置的那样，子元素的flex-basis和flex-grow为0，表示每个子元素都严格占满了容器的宽度，同时因为scroll-snap-type属性的设置，每个子元素都会自动与容器调整对齐，实现滑动自动铺满的效果。

查看更多关于css滑动自动铺满的详细内容...