在css中如何用flex制作水平滚动列表_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在css中如何用flex制作水平滚动列表

2025-10-06

浏览次数：次

返回列表

使用 Flexbox 实现水平滚动列表需设置容器 display: flex、flex-wrap: nowrap 和 overflow-x: auto，子项设置 flex: 0 0 auto 并固定宽度，配合 gap 间距与 scroll-beh*ior: smooth 可提升体验，通过伪元素可自定义滚动条样式，适用于多端无需 J*aScript。

在css中如何用flex制作水平滚动列表

要使用 CSS Flexbox 制作一个水平滚动列表，关键在于将容器设置为 flex 布局，并禁止换行，然后允许内容在横向溢出并可滚动。

1. 基本结构

HTML 结构通常是一个外层容器包裹多个项目项：

  Item 1
  Item 2
  Item 3
  Item 4

2. 核心 CSS 设置

通过以下样式实现水平滚动效果：

.scroll-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-beh*ior: smooth;
  gap: 10px;
  padding: 10px;
  scrollbar-width: thin;
}

.item {
  flex: 0 0 auto;
  width: 200px;
  height: 150px;
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

3. 关键属性说明

display: flex：启用弹性布局
flex-wrap: nowrap：防止子元素换行，强制排在一行
overflow-x: auto：当内容超出容器宽度时显示横向滚动条
flex: 0 0 auto：设置子项不伸缩，保持固定宽度，且不自动拉伸
scroll-beh*ior: smooth：让滚动更顺滑（可选）
gap：设置项目之间的间距，比 margin 更干净

Mureka

Mureka是昆仑万维最新推出的一款AI音乐创作工具，输入歌词即可生成完整专属歌曲。

1091 查看详情 Mureka

4. 可选优化

去除浏览器默认滚动条样式，提升视觉体验：

.scroll-container::-webkit-scrollbar {
  height: 6px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

基本上就这些。只要容器是 flex 且不换行，子项固定宽度不拉伸，再开启横向滚动，就能实现流畅的水平滚动列表。移动端和桌面端都适用，无需 J*aScript。

以上就是在css中如何用flex制作水平滚动列表的详细内容，更多请关注其它相关文章！

# 是一个 # 网络推广就是网站推广吗 # seo英语参考文献 # 北京seo软件知名乐云seo专家 # 汽车网络营销怎么推广的 # 潍坊市城乡建设网站 # 工程保函网络营销推广 # 黄石网站建设优化建站 # 梅州网站推广代运营招聘 # 关于网站建设需要注意 # 三十多岁的seo # 多个 # 就能 # 选择器 # 两种类型 # css # 中不 # 可选 # 换行 # 滚动条 # 如何用 # overflow # 弹性布局 # ai # 浏览器 # 伪元素 # html # java # javascript