用flex布局最稳，因其避免浮动导致的父容器塌陷和绝对定位脱离文档流的问题，支持响应式换行、侧边栏收缩、头部高度变化及深色模式适配。
通知栏用 flex 布局最稳，别用浮动或绝对定位——前者容易错位，后者一加响应式就崩。
为什么不用 float 或 position: absolute
浮动会导致父容器高度塌陷，通知栏内容一多就和下面的菜单/主区域重叠；position: absolute 脱离文档流，无法自动适配侧边栏收缩、头部高度变化等后台常见状态。很多模板里通知栏“突然消失”或“压住按钮”，根源都在这里。
- 浮动需手动清浮，
overflow: hidden或::after伪元素都可能干扰其他组件 - 绝对定位依赖固定 top/left 值，但后台系统中
header高度常随用户头像、通知角标动态变化 - 两者都不支持响应式换行，小屏下文字溢出或横向滚动，体验极差
display: flex 的正确写法（含横向滚动）
横向公告本质是「单行可滚动+自适应宽度」，不是单纯“排成一排”。关键在控制子项不换行、父容器截断并启用滚动条：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 父容器设
display: flex+flex-wrap: nowrap+overflow-x: auto+scrollbar-width: none（Firefox）和::-webkit-scrollbar { display: none }（Chrome/Safari） - 每个公告项用
flex: 0 0 auto，禁止缩放、禁止换行、宽度由内容撑开 - 必须加
white-space: nowrap和text-overflow: ellipsis防止长文本撑爆容器
示例结构：
<div class="notice-bar"> <div class="notice-item">系统将于今晚23:00维护</div> <div class="notice-item">新版本上线，点击查看更新日志</div> <div class="notice-item">权限组配置已同步至所有子账户</div> </div>
与后台整体布局的兼容要点
通知栏不是孤立模块，它要嵌进标准后台结构里（<header></header> 下或 <main></main> 顶部），所以得考虑三类边界情况：
立即学习“前端免费学习笔记（深入）”；
- 如果放在
<header></header>内部，需确保它不挤占 logo 和用户头像位置——建议用margin-left: auto推到右侧，或用flex: 1占满剩余空间 - 如果侧边栏可折叠，通知栏宽度必须跟随
main区域变化，不能写死width: 100%，而应依赖 flex 自然伸缩 - 深色模式下，背景色要用 CSS 变量（如
var(--bg-level-1)），避免硬编码#f8f9fa导致切换后文字看不见
真正难的不是让文字横着排，而是让它在 header 高度变、侧边栏收/展、主题切换、小屏滑动这四件事同时发生时，依然不跳、不遮、不溢、不卡——这些细节没被显式声明，但恰恰决定一个通知栏算不算“能用”。
