display: flex是最直接可靠的ul/ol排列控制方式：设flex-direction为row（横排）、column（竖排）、row-reverse或column-reverse（倒序），需清除list-style和padding，并用gap控间距；注意column-reverse会反转可访问性顺序。
用 display: flex 控制 ul 或 ol 的排列方向
列表默认是垂直堆叠的，想横排、竖排、倒序排，display: flex 是最直接可靠的方式。别碰 float 或 inline-block——前者要清浮动，后者被 HTML 空白符坑得没完没了。
- 给
ul或ol加display: flex，再设flex-direction： -
flex-direction: row→ 横向从左到右（LTR 下） -
flex-direction: column→ 纵向从上到下 -
flex-direction: row-reverse或column-reverse→ 视觉顺序翻转 - 记得关掉默认样式：
list-style: none和padding-left: 0，否则会偏移 - 用
gap替代margin控制间距，更干净；IE 不支持gap，需回退到margin
flex-direction: column-reverse 会同步反转可访问性顺序
视觉上倒着排，DOM 节点顺序没变，但屏幕阅读器和键盘 Tab 会按 CSS 渲染顺序读——也就是倒过来。这不是 bug，是规范行为。
- 如果列表需要语义正确（比如导航菜单、表单步骤），别直接用
column-reverse - 真要倒序且保可访问性，得用 JS 把
li节点重排：Array.from(list.children).reverse().forEach(el => list.appendChild(el)) -
aria-reversed="true"可提示屏幕阅读器当前是倒序，但仅部分读屏软件识别，不能替代 DOM 重排 - 别误以为
<ol reversed></ol>能用于ul——它只对ol生效，且只改序号（10, 9, 8…），不改节点顺序或视觉排列
为什么加了 flex-direction: row 却换行了？
不是方向设错了，是子项总宽超出了父容器，而 flex-wrap 默认是 nowrap，浏览器只能压缩子项宽度来塞进去，看起来像“挤成一行”，实际是强行缩小。
- 检查是否漏了
flex-wrap: wrap—— 需要折行时才加 - 子项有固定宽（比如
width: 200px）+ 父容器窄 → 必然溢出或压缩，此时要么设flex-shrink: 0，要么用min-width: 0允许内容收缩 - 移动端常见问题：
li里文字太长没换行，撑开整个项。加white-space: normal和word-break: break-word - 别依赖
order属性去调顺序——每个li都得手动设值，在动态列表里根本没法维护
横向排列时，justify-content 和 align-items 怎么配？
这两个属性的作用轴随 flex-direction 动态切换，容易配反。主轴永远是 flex-direction 指向的方向。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row→ 主轴水平，justify-content控制左右对齐，align-items控制上下对齐 -
flex-direction: column→ 主轴垂直，justify-content控制上下对齐，align-items控制左右对齐 - 常用组合：
justify-content: center; align-items: center居中所有项；justify-content: space-between两端对齐，中间无间隙 - 如果
li高度不一致，align-items: stretch（默认）会让它们拉满容器高——不想这样就显式设align-items: flex-start
flex-direction、flex-wrap、子项尺寸约束（min-width/flex-basis）三者叠加时，浏览器计算换行点和压缩逻辑的隐式行为。调试时先删光所有尺寸限制，确认方向生效，再一条条加回去看哪步触发意外缩放或换行。 
