Flex布局仅用于树形菜单节点内图标、文字、箭头的水平对齐与间距控制，层级结构仍需ul/li嵌套实现，缩进用padding-left，折叠逻辑由JS和aria-expanded配合伪元素动画完成。
用 Flex 布局实现带折叠箭头的树形菜单节点，关键不是“只靠 Flex”，而是把 Flex 用在合适的位置——它负责对齐和间距，真正的层级与折叠逻辑仍由嵌套结构 + JS 控制。直接用 Flex 拉平所有节点反而会破坏语义和可访问性。
结构必须用 ul/li 嵌套，Flex 只用于单行节点内布局
每个菜单项（li）内部需要水平排列图标、文字、箭头，这时 Flex 就很合适：
- 父容器 ul 保持默认块级流，维持层级关系
- 每个 li 内部设 display: flex，让触发按钮、文字、折叠箭头左对齐、垂直居中
- 子 ul 仍作为 li 的直接子元素，不参与该行 Flex，避免干扰层级渲染
- 缩进靠 padding-left 实现（比如每级 20px），而不是靠 Flex 的 justify-content 或 margin
折叠箭头用伪元素或 inline SVG，配合 aria-expanded 控制状态
箭头不是装饰，而是交互反馈。推荐用 CSS 伪元素 + transition，比图片更轻量、易控制：
- 给触发 button 设置 position: relative，然后 ::after 生成 ▶ 或 ▼
- 通过 [aria-expanded="true"] .toggle::after { content: "▼"; } 切换图标
- 加 transition: transform 0.2s ease 可实现旋转动画（transform: rotate(90deg) → rotate(180deg)）
- 务必同步更新 aria-expanded 和 data-expanded，否则屏幕阅读器读不出状态
Flex 辅助对齐，但不能替代层级 DOM 结构
常见误区是试图用 flex-wrap 或 flex-direction: column 把整个树“拉直”，这会导致：
立即学习“前端免费学习笔记（深入）”；
- 子菜单脱离父 li 的上下文，键盘 Tab 顺序错乱
- aria-owns / aria-controls 失效，无障碍支持中断
- JS 查找 nextElementSibling 找不到对应 ul，折叠逻辑失效
- 响应式时缩进和层级容易塌陷
实际代码片段示意（精简核心）
HTML 部分保持语义化嵌套：
<ul class="tree">
<li>
<button class="toggle" aria-expanded="false" aria-controls="sub1">文档</button>
<ul id="sub1" class="nested">
<li><a href="#">入门指南</a></li>
<li><a href="#">API 参考</a></li>
</ul>
</li>
</ul>
CSS 中用 Flex 对齐按钮内容：
.toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
text-align: left;
background: none;
border: none;
padding: 4px 8px;
}
.toggle::after {
content: "▶";
font-size: 12px;
transition: transform 0.2s;
}
[aria-expanded="true"] .toggle::after {
content: "▼";
transform: rotate(0);
}
[aria-expanded="false"] .toggle::after {
transform: rotate(-90deg);
} 
