flex-grow无法直接过渡，因其为非数值型计算属性，无中间状态；应改用flex-basis、width或max-width等可动画数值属性配合transition实现平滑伸缩。
单独写
加
不会得到平滑伸缩效果——浏览器无法对
或
计算的动态宽度做插值动画，必须用可动画的数值类型打底。
为什么 flex-grow + transition width 会跳变
直接给
同时设
和
，动画大概率失效或突变。根本原因是：flex-grow 分配的是“剩余空间”，这个值在渲染时才计算，不是 CSS 可过渡的数值类型；而
或
也不支持插值。
起始状态若为
，结束状态是
，浏览器无中间值可算，直接跳
哪怕你手动设了
→
，
仍会干扰布局逻辑，尤其当兄弟元素存在时
Safari 对
过渡的合成优化差，常伴随重排抖动
真正能动的写法：用 max-width + overflow + transform
要让伸缩有动画、不裁字、不丢焦点，得绕过
，改用浏览器原生支持硬件加速的属性：
用
控制伸展上限，起始设
，展开设
，配合
更顺滑的做法是
：初始
，展开时过渡到
，并用
锚定左端
必须加
（仅在激活前 JS 动态添加，用完移除），否则 Safari 下首帧卡顿
别忘了
，否则 padding 和 border 会让视觉宽度超出预期
Flex 布局里按钮和输入框怎么共存不打架
搜索框常带图标按钮，一动就挤、一缩就叠，关键在 flex 项行为隔离：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
按钮必须加
，否则小屏下会被压缩甚至消失
输入框用
（即
），再显式加
防 Chrome 拒绝收缩
父容器禁用
，它在 iOS 键盘弹出时容易误判主轴尺寸，导致子项错位
移动端建议把按钮抽成
叠在 input 右侧，释放水平空间，避免 flex 协调负担
移动端键盘弹出后伸缩失效怎么办
这不是 CSS 写错了，而是视口单位塌陷。iOS Safari 软键盘弹起时，
失效，
容器失去高度参考，整个伸缩链断掉：
删掉所有
或
，改用
（Safari 16.4+ 支持）
老版本 iOS 必须 JS 补位：监听
，检测
变化，动态更新容器
确保
存在，否则键盘会强制缩放页面，flex 布局彻底失准
别在
里触发伸缩——Safari 对它的支持不稳定，改用 JS 的
/
事件
真正难的从来不是写哪一行 CSS，而是整条链路：从视口单位是否可靠、到父容器 display 是否干净、再到兄弟节点有没有偷偷加
或
，任何一环污染，
就静默失效。
flex-grow: 1transition: width 0.3sautoflex-growinputflex-grow: 1transition: widthwidth: autowidth: fit-contentwidth: autowidth: 240pxwidth: 0width: 240pxflex-growwidthwidthmax-widthmax-width: 0max-width: 320pxoverflow: hiddentransform: scaleX()transform: scaleX(0)scaleX(1)transform-origin: left centerwill-change: transformbox-sizing: border-boxflex-shrink: 0flex: 1 1 autoflex-grow: 1; flex-shrink: 1; flex-basis: automin-width: 0flex-wrap: wrapposition: absolutevhflexheight: 100vhmin-height: 100vhmin-height: 100dvhresizewindow.visualViewport?.heightmin-height:focus-withinfocusinblurflex-shrink: 0widthflex-grow: 1