details不能直接作为flex容器子元素，因会破坏summary交互热区；应避免将其置于display: flex父元素中，改用inline-flex包裹或调整内部布局。
details标签不能直接放在flex容器里当子元素用
Flex容器会强制重排子元素的display行为，而details默认是display: block，但它的内部渲染逻辑（尤其是summary的点击热区和toggle事件）依赖于浏览器对原生语义结构的识别。一旦被display: flex父容器包裹，部分浏览器（特别是Safari 16–17.4）会截断summary的交互区域，表现为“点一下没反应”或“Tab键跳过”。这不是bug，是规范未定义的副作用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别把
details直接塞进display: flex的div或nav里；如果必须横向排列多个details，用display: inline-flex包裹每个details，而不是让details自己当flex item - 若需对齐多个
details的summary文本（比如统一右对齐箭头），改summary的text-align或margin-inline-start，别碰display属性 - 避免在flex容器上设
align-items: center——它会让summary垂直居中后，顶部热区变窄，iOS Safari下极易点空
用Flex布局控制details内部内容的对齐
details本身不排斥内部用Flex，只要不破坏summary为首个子元素的结构。常见需求是让展开后的内容左对齐、右对齐，或内部按钮水平居中——这些完全可以用Flex解决。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
details内部的容器（比如<div class="content">）设display: flex，而不是给details本身设 - 若内容区要垂直居中，用
flex-direction: column; justify-content: center;，但注意：不要给summary加flex相关样式，否则可能干扰其原生display: list-item行为 - 展开后内容高度不固定时，慎用
align-items: stretch——它会让所有子项拉满高度，可能撑开summary的行高，导致点击偏移
details嵌套时，Flex布局会放大兼容性问题
嵌套details本就存在Safari和微信X5内核支持差的问题，再叠加上Flex布局（尤其是外层display: flex + 内层details），会触发双重降级：iOS Safari可能直接忽略内层toggle事件，微信里整个details树变成静态文本。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多级折叠菜单场景下，放弃“
details套details+ Flex对齐”的组合，改用CSS Grid模拟表格式缩进（grid-template-columns: 2rem 1fr），每层用一个div包裹summary和内容，再用details单独控制展开逻辑 - 如果坚持嵌套，确保每一层
details都**直接兄弟于父summary之后**，中间不能有div或flex容器——否则Safari会丢掉子级的open状态 - 用
details[open] > summary::before做图标旋转时，别用transform: translateX()去微调位置，Flex的justify-content会覆盖这个偏移，导致图标“飘走”
移动端细节：Flex的gap和details的间距冲突
gap在Flex容器中很省事，但用在details列表上容易出问题：Safari对gap计算summary高度不一致，导致相邻details之间留白过大，或者展开后内容顶到上一个summary底部。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
margin-bottom替代gap控制details之间的间距，更可控 - 如果必须用
gap，只在外层容器（如section）上设，且值不超过0.75rem；同时给details加overflow: hidden，防止展开动画时内容溢出挤压间隙 - 在微信内置浏览器中，
gap可能完全失效，此时得靠@supports (gap: 1rem)做特性检测，fallback到margin
真正难的不是让details和Flex“一起工作”，而是判断哪一层该交由Flex控制、哪一层必须守住原生语义边界。多数线上问题，都出在试图用Flex“修正”summary的显示，结果反而切掉了它的可访问性入口。
