以下是一个包含弹性滚动器的Flex布局的示例代码:
HTML代码:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
CSS代码:
.flex-container {
display: flex;
flex-wrap: wrap;
height: 200px; /* 设置容器高度 */
overflow-y: scroll; /* 设置垂直滚动 */
}
.flex-item {
flex: 0 0 200px; /* 设置每个项目的宽度 */
height: 200px; /* 设置每个项目的高度 */
margin: 10px;
background-color: #ccc;
}
在上面的示例中,.flex-container
是一个使用Flex布局的容器,并设置了高度为200px和垂直滚动。.flex-item
是Flex容器中的项目,每个项目的宽度为200px,高度为200px,并带有一些样式属性。
通过设置.flex-container
的overflow-y
属性为scroll
,可以为容器添加垂直滚动条。如果容器中的项目超出容器的高度,将会出现滚动条。
你可以根据需要调整容器和项目的尺寸、数量和样式。