给 ul 设置 display: flex 并配合 justify-content、gap 和 flex-wrap 等属性实现 li 横排与响应式布局，避免使用 float、inline-block 等过时或易出错方式。
li 默认换行，怎么让它横着排？
因为 li 是块级元素（在 ul 或 ol 里默认表现如此），浏览器会自动换行。想让它并排，本质是改变它的盒模型行为，不是“给 li 加个 magic 属性”就能解决。
- 最常用且兼容性最好的方式是给父容器
ul设置display: flex - 不推荐直接给每个
li设float: left—— 清浮动麻烦、响应式难控、现代布局已淘汰 - 别用
display: inline或inline-block给li，容易因空格/换行产生不可控间隙，调试时很迷惑
flex 布局下如何控制间距和对齐？
设了 display: flex 只是第一步，真正影响“一排是否整齐”的是父容器的主轴对齐和子项间距。
- 用
justify-content控制整体水平分布：flex-start（左对齐）、space-between（两端对齐）、space-around（等距环绕） - 用
gap替代老式margin控制li之间距离，更干净、不干扰首尾外边距 - 如果
li内容高度不一，加align-items: center让它们垂直居中，否则看起来像错位 - 注意：IE11 对
gap支持有限，如需兼容，改用margin-right并给最后一个limargin-right: 0
遇到换行或溢出怎么办？
“一排”不等于“强行挤在一排”，内容多了自然要处理换行逻辑，否则会横向滚动或撑破容器。
- 默认
flex-wrap: nowrap，所有li死扛着不换行 —— 这是多数人踩坑的源头 - 加
flex-wrap: wrap后，超出容器宽度自动折行，但这时justify-content对单行有效，多行需配合align-content - 若希望始终单行且内容截断，给父容器加
overflow-x: auto+white-space: nowrap，再让li用flex-shrink: 0防止被压缩 - 移动端慎用固定宽度
li，优先用flex: 1或min-width配合flex-wrap
为什么有时候 flex 不生效？
常见不是代码写错，而是被其他样式或结构干扰了。
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否被设了
display: block或其他值覆盖了flex—— 浏览器开发者工具里看 computed 样式最准 -
ul有默认padding-left，可能让第一项看起来“缩进”，不是没排上，是被 padding 推开了 - 如果
li里套了div或a且设了display: block，它可能又把内部撑成块级，建议统一用display: flex或确认子元素未重置盒模型 - Vue/React 等框架中动态渲染
li时，若用v-for/map生成但忘了 key 或包裹元素，也可能导致 flex 子项识别异常
真正卡住的时候，先关掉所有自定义样式，只留最简 ul { display: flex; } 和几个纯文本 li，确认基础能横排，再一层层加回来 —— 很多时候问题不在 flex 本身，而在它周围的“空气”。
