用 display: flex 可控实现列表项水平或垂直排列，flex-direction 控制方向，gap 替代 margin 控制间距，响应式下用媒体查询切换方向，关闭 list-style 避免布局偏移，等宽场景优先用 grid。
用 display: flex 控制列表项水平/垂直排列
HTML5 本身不提供“自动横向排布列表”的语义能力，<ul></ul> 和 <li> 默认是块级垂直堆叠。要实现紧凑、可控的排列（比如导航栏、图标网格、标签云），必须靠 CSS。最直接可靠的方式是给 <ul></ul> 设置 display: flex。
-
flex-direction: row实现横向左对齐排列；加flex-wrap: wrap可折行 -
flex-direction: column适合侧边栏菜单等垂直场景 - 避免在
<li>上设float或inline-block—— 容易因空白符或基线对齐出错，且无法响应式控制间距 - 用
gap替代margin控制项间距离，更干净（注意 IE 不支持）
ul.inline-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
ul.inline-list li {
list-style: none;
}
响应式断点下切换 flex 排列方向
移动端常需把横向导航收为垂直折叠菜单，但又不想改 HTML 结构。纯 CSS 方案就是靠媒体查询重置 flex-direction 和 gap。
- 小屏（如
max-width: 768px）设flex-direction: column，并可加align-items: flex-start避免文字居中截断 - 若列表项含按钮或链接，确保触摸目标至少
44px × 44px，可在@media中放大padding - 慎用
flex: 1均分宽度——文本长度差异大会导致换行错乱，优先用min-width+flex-wrap
@media (max-width: 768px) {
.nav-list {
flex-direction: column;
gap: 4px;
}
.nav-list a {
padding: 12px 16px;
}
}
避免 list-style-position: inside 引发的布局偏移
当用 display: flex 时，<li> 的默认 list-style（如圆点）可能被裁切或挤到内容左侧外，尤其在设置了 padding-left 或 text-indent 的情况下。
- 最稳妥做法：显式关闭装饰
list-style: none，用伪元素::before自定义标记（便于统一颜色/大小/对齐） - 若坚持用原生标记，必须配
list-style-position: outside（默认值），且确保父容器有足够左内边距 -
inside会让标记参与盒模型计算，容易让flex项宽度失控，调试时注意 DevTools 中 computed 样式里的list-style-position
用 grid 替代 flex 处理等宽多列列表
当列表项需严格等宽（如商品卡片、技能图标网格），flex 需配合 flex-basis 和 min-width 才能稳定，而 grid 更直观。
立即学习“前端免费学习笔记（深入）”；
- 设
display: grid+grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))可自适应列数 -
grid-gap（或gap）比flex的gap在跨行场景下更稳定 - IE11 支持
grid但语法不同（-ms-grid），如需兼容，建议降级为flex+flex-wrap，而非强行用旧 Grid - 不要给
<li>设width: 33%—— 在grid下会被忽略，且破坏响应性
.card-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
实际项目中最容易被忽略的是：列表语义没变，但视觉排列一改，屏幕阅读器仍按 DOM 顺序读取。如果横向排列改变了逻辑优先级（比如把“返回”按钮放在右侧），就得用 aria-order 或调整 HTML 顺序，不能只靠 CSS 翻转。 
