Flex布局优于定位，因其自动适配响应式需求：支持弹性分配、自动换行、左右分置、垂直居中及间距控制，避免手动坐标错位、文档流塌陷和多断点重复计算。
因为 Flex 布局天然支持内容驱动的弹性分配，而定位（position: absolute 或 position: fixed）依赖手动坐标控制，一换屏幕尺寸就容易错位、重叠或留白。
Flex 布局能自动适配不同宽度的导航栏结构
响应式头部通常包含 logo、菜单项、搜索框、用户头像等元素，它们在桌面端横向排列，在移动端可能折叠或堆叠。Flex 的 flex-wrap: wrap、justify-content: space-between 和 flex: 1 等特性可让子项根据容器宽度自动换行、收缩或撑满空间。
-
justify-content: space-between在宽屏下左右分置 logo 和操作按钮，窄屏时仍保持间距逻辑，不会靠边挤成一团 - 给菜单项加
flex: 0 1 auto，它们就不会被强制拉伸变形，也不会因内容长度差异导致不对齐 - 配合
gap控制间距，比用margin更稳定——不会因 margin 折叠或父子塌陷出问题
定位布局在响应式中必须手动写多套偏移值
一旦用 position: absolute 把 logo 放左、用户头像放右，你就得为每个断点重新计算 left / right 值；用 position: fixed 做吸顶栏，又得额外处理滚动时的 z-index、高度冲突和 touch 区域遮挡。
- 绝对定位元素脱离文档流，父容器高度常塌陷，需要额外设置
min-height或伪元素清除，否则下面内容会上移 - 移动端 viewport 缩放后，
px偏移值可能失准，rem或%又难精确对齐，尤其当字体缩放开启时 - 没有内置换行机制，想让菜单在小屏竖排？得切 DOM 或靠 JS 切换 class，Flex 一行
flex-direction: column就搞定
Flex 的垂直居中和对齐能力直接解决头部常见痛点
头部里图标、文字、按钮经常需要垂直居中对齐，但行高、font-size、padding 差异会让 vertical-align 失效，定位又得反复调 top: 50% + transform: translateY(-50%)。
立即学习“前端免费学习笔记（深入）”；
-
align-items: center一行生效，不管子项是文本、图片还是 SVG，交叉轴自动居中 - 子项高度不一致？
align-items: stretch（默认）会拉平，或者用align-self: flex-start单独调整 - 不需要
line-height去凑高度，也不用担心 inline 元素基线对齐带来的错位
真正麻烦的不是写几行 Flex 代码，而是当设计稿突然加个「移动端菜单图标右对齐、文字左对齐」需求时，你发现所有 absolute 坐标都得重算一遍，而 Flex 只需改一个 justify-content 值再加个 order 属性——这个细节，上线前压测阶段最容易被忽略。
