css - flex布局实现div横向滚动

作者：System 时间：2024年08月15日分类：所有,css 字数：603

要在CSS中使用flex布局实现div横向滚动，可以将容器设置为overflow-x: auto;，并且内容超出容器宽度时可以滚动。以下是实现这种效果的示例代码：

HTML:




<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <!-- 更多的项 -->
</div>

CSS:




.flex-container {
  display: flex;
  overflow-x: auto;
}
 
.flex-item {
  flex: 0 0 auto; /* 不伸缩，固定宽度，不允许空白 */
  margin-right: 10px; /* 项之间的间隔 */
  /* 设置宽度或者其他样式 */
}

在这个例子中，.flex-container 是一个横向滚动的容器，所有的 .flex-item 子元素会在容器内横向排列。当所有子元素的总宽度超出 .flex-container 的宽度时，容器会出现滚动条，可以横向滚动查看更多内容。

css - flex布局实现div横向滚动

评论已关闭

推荐阅读