flex布局下ul嵌套缩进失效的根本原因是flex容器将li作为flex item处理，导致子ul的padding-left视觉丢失；应避免给li设display:flex，改用ul>li控制直接子项，并显式设置ul ul{padding-left:1.5em}。
flex布局下ul嵌套缩进失效
多级 <ul> 套 <ul> 时，用 display: flex 包裹外层列表后，子列表的默认左缩进（由浏览器 UA 样式提供的 padding-left）经常被重置或压垮——不是没缩进，就是缩进错位、文字贴边、项目符号（bullets）消失。
根本原因：flex 容器默认把子元素（<li>）当 flex item 处理，而 <ul> 在 <li> 内部时，它的 padding-left 依然存在，但父级 <li> 的 display 若被设为 flex，又可能触发对齐挤压，导致内部 <ul> 的 padding 视觉上“被吃掉”。
- 别给
<li>直接设display: flex，除非你真要水平排内容；多数情况只需让<li>保持display: list-item - 子
<ul>必须显式保留缩进：ul ul { padding-left: 1.5em; }（不能依赖 UA 默认值） - 如果用了
list-style-position: inside，注意它会让 bullet 进入内容流，flex 下易换行错位；优先用outside+ 调整padding-left
用flex控制列表项间距但不破坏层级
想让每项 <li> 垂直间距统一、响应式撑开，又不想让嵌套的 <ul> 被拉伸变形——这时候不能对外层 <ul> 整体设 display: flex; flex-direction: column; gap: 1rem;，那会把所有子孙 <ul> 也当成 flex item 拉平。
正确做法是只对**直接子 <li>** 应用 flex 控制，且隔离嵌套结构：
立即学习“前端免费学习笔记（深入）”；
- 写成
ul > li { display: flex; flex-direction: column; gap: 0.75rem; }，> 子选择器确保不穿透到深层 - 嵌套的
<ul>需单独重置：在ul > li > ul上加margin: 0; padding-left: 1.5em;，避免继承父级 gap 或 margin - 若需 hover 效果或图标对齐，用伪元素
::before而非额外标签，否则 flex 容器里多一个节点容易打乱 baseline
IE11兼容时flex+列表的fallback方案
IE11 对 display: flex 在 <ul>/<ol> 上的支持极差，尤其嵌套时会直接丢弃 list-style 或错乱缩进。别指望 autoprefixer 补全——它不修语义渲染缺陷。
稳妥策略是降级为传统块布局，但保留 flex 的视觉效果逻辑：
- 用
@supports not (display: flex)包裹 flex 规则，里面写回退：ul { padding-left: 2em; } ul > li { margin-bottom: 0.75rem; } - 避免在 IE11 下对
<ul>设display: -ms-flexbox，实测它和list-style冲突更严重 - 如果必须支持 IE11 且有复杂对齐需求，宁可放弃纯 CSS 方案，用 JS 动态补
style或 class 控制缩进层级（比如根据querySelectorAll('ul ul')深度加 class）
缩进值该用em还是rem还是px
多级列表的缩进不是越深越好看，而是要保证 bullet 可读、文本对齐、响应时不挤成一团。用错单位会导致二级缩进比一级还小，或移动端缩得看不见。
-
em最合理：基于当前字体大小缩放，ul ul { padding-left: 1.5em; }表示“当前<li>字号的 1.5 倍”，天然适配不同字号层级 - 别用
px：固定死缩进，在缩放页面或大字体辅助模式下直接失效 -
rem要慎用：它基于根字体大小，如果某级<li>主动改了font-size（比如标题类列表项），rem 缩进就和文字脱节了
真正难处理的是三级以上嵌套——浏览器默认最多支持两级 UA 缩进，再深就得手动算：三级用 2.25em（1.5 × 1.5），四级 3.375em，但超过四级建议重构结构，而不是硬堆缩进。
