HTML5 中怎么用 Flex 布局制作带滚动条的横向标签导航栏-H5教程-PHP中文网

用flex布局实现横向滚动标签栏：容器设display: flex、flex-wrap: nowrap、overflow-x: auto；子项设flex-shrink: 0、white-space: nowrap、min-width: max-content；美化滚动条并添加scroll-behavior: smooth等交互优化。

html5 中怎么用 flex 布局制作带滚动条的横向标签导航栏

用 Flex 布局实现带滚动条的横向标签导航栏，核心是让容器可滚动、子项不换行、且保持内联对齐。关键在于 flex-wrap: nowrap 配合 overflow-x: auto，再处理滚动条样式和交互细节。

基础结构与 Flex 设置

容器设为 display: flex，禁用换行，并允许横向滚动：

给导航容器（如 <nav></nav> 或 <div class="tabs">）设置：<br><font color="#2a5d8a"><strong>display: flex;<br>flex-wrap: nowrap;<br>overflow-x: auto;<br>overflow-y: hidden;</strong></font> <li>为避免滚动条占用空间影响布局，推荐加 <code>scrollbar-width: none（Firefox）和自定义 WebKit 滚动条（Chrome/Safari）
子标签（如 <button></button> 或 <a></a>）默认会沿主轴排列，无需额外 flex 属性，但建议设 flex-shrink: 0 防止在小屏下被压缩

保证标签不被截断 & 内容可见

横向滚动时，标签文字或图标可能因宽度不足被裁剪。需注意：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

每个标签设 white-space: nowrap; 防止内部文字换行
添加 min-width: max-content; 或固定最小宽（如 min-width: 80px;），确保内容完整显示
若标签含图标+文字，用 display: inline-flex; align-items: center; gap: 6px; 保证对齐

美化滚动条（可选但推荐）

原生滚动条样式丑且占空间，可用 CSS 轻量定制：

WebKit（Chrome/Safari）：
.tabs::-webkit-scrollbar { width: 6px; }
.tabs::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.tabs::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.tabs::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }
Firefox：
.tabs { scrollbar-width: thin; scrollbar-color: #c1c1c1 #f1f1f1; }