<details>标签本身不参与Flex布局，两端对齐失败的主因是<summary>默认为list-item且含伪元素；正确做法是将内容全包进<summary>内并对其设flex，同时加list-style:none和align-items:center。
details 标签本身不参与 Flex 布局的子项排列，直接在 <details> 上设 display: flex 无效——它必须作用于其直接子元素（通常是 <summary> 和后续内容），且 <summary> 默认是 display: list-item，会干扰对齐逻辑。
为什么 details + flex 两端对齐容易失败
常见错误是给 <details> 加 display: flex 和 justify-content: space-between，结果图标和文字没分开，甚至消失或错位。根本原因有三个：
-
<summary>是替换元素，自带伪元素（如三角箭头），且默认display: list-item，flex 容器内它不会自动“让出空间”给其他兄弟元素 - 如果把图标写在
<summary>外部（比如紧接在后面），它不属于<summary>的子元素，但又不是<details>的直系 flex 子项（因为浏览器会把<summary>和后续内容视为两个独立块级流） - 某些浏览器（尤其是 Safari 16.6 之前）对
<summary>的 display 变更支持不稳定，inline-flex或flex可能被忽略或重置
正确做法：用 summary 包裹全部内容，再内部 flex
把图标和文字都放进 <summary> 里，再对 <summary> 应用 flex 布局。这是唯一稳定、跨浏览器生效的方式：
<details>
<summary style="display: flex; justify-content: space-between; align-items: center; list-style: none;">
<span>账户设置</span>
<img src="icon.svg" alt="settings" width="16" height="16">
</summary>
<p>这里是详情内容…</p>
</details>
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设
list-style: none，否则原生三角箭头和自定义图标会叠在一起 -
align-items: center防止图标因行高或基线偏移而上下错位 - 不要给
<details>设display，让它保持默认block行为，避免干扰 summary 渲染顺序 - 若需保留原生展开箭头，可用
::marker覆盖，但兼容性略差（Firefox 68+、Chrome 86+、Safari 15.4+）
需要保留原生箭头时的兼容写法
如果设计要求保留浏览器默认三角符号，又想右对齐图标，只能放弃 space-between，改用 margin-left: auto 推图标到最右：
<summary style="display: flex; align-items: center; list-style: none;">
<span>帮助中心</span>
<span style="margin-left: auto;">
<img src="help.svg" alt="help" width="16">
</span>
</summary>
这样做的好处：
- 原生
::marker仍正常显示在左侧（无需额外 hack） -
margin-left: auto不依赖兄弟元素数量，比justify-content更可控 - 在旧版 Safari（如 13.1）中也能稳定工作
- 若后续要加更多右侧元素（如 badge），只需继续往
margin-left: auto容器里塞
细节决定成败：真正难的不是写 flex，而是理解 <summary> 的渲染层级和浏览器对它的特殊处理——它既不是普通 inline 元素，也不是标准 block 容器，所有对齐操作必须落在它内部，且要主动关闭默认样式干扰。
