用 flex 布局需精细控制伸缩性与断点：设 flex-wrap: wrap 防溢出，nav 用 margin-left: auto 实现 logo 左、按钮右；搜索框父容器加 min-width: 0，flex 推荐写为 1 1 200px；body flex 需显式 min-height 防键盘导致“飘移”。
直接用 display: flex 搭配 justify-content 和 flex-wrap 就能搞定，但必须控制子元素的伸缩行为和断点逻辑，否则小屏下会挤成一团或横向溢出。
为什么 justify-content: space-between 在小屏上失效？
它只管主轴两端对齐，不管内容宽度。当屏幕变窄，logo、nav、按钮这些元素总宽超过容器，space-between 仍强行拉扯，导致文字换行错乱或水平滚动条出现。
- 根本原因是没设
flex-wrap: wrap，子元素被强制挤在同一行 - 更隐蔽的问题是：nav 里一堆
<a></a>标签默认不换行，也没设white-space: nowrap或最小宽度约束 - 微信 iOS WebView 下，
vh高度受键盘弹出影响，align-items: center可能失准
flex: 1 填充剩余空间时为什么搜索框太窄？
flex: 1 等价于 flex: 1 1 0，意味着“从 0 宽度开始拉伸”，但输入框有默认 min-width（如 Chrome 是 120px），实际表现常不如预期。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 推荐写成
flex: 1 1 200px，明确最小可用宽度 - 务必加
min-width: 0到搜索框父容器（比如.search-wrapper），防止 flex 项目因内容过长撑破布局 - 移动端建议用
@media (max-width: 480px)改为flex-direction: column，让搜索框独占一行
如何让 logo 居中、按钮右对齐，又不破坏 nav 结构？
别依赖 justify-content: space-between 硬拆，它在元素数量变化时极易偏移。真正可控的方式是用 margin-left: auto 推动右侧区块。
- HTML 结构保持
<div class="header"> <div class="logo"></div> <nav></nav><div class="actions"></div> </div> - CSS 写
.header { display: flex; align-items: center; }，然后nav { margin-left: auto; }—— 这样 logo 和 nav 自然左靠，actions 自动右贴边 - 若需多按钮并排，用
.actions { display: flex; gap: 0.5rem; }，每个按钮加flex: 0 0 auto防拉伸
最易被忽略的是：Flex 容器的 min-height 必须显式设定，尤其在 body 直接设 flex 的场景下；否则 viewport 高度波动（比如软键盘弹起）会让整个 header “飘”走。这不是 bug，是 flex 严格按内容高度计算的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
