flex子项行为失效因父容器未设display: flex或子项用了Float/position: absolute；表单分组需flex+gap+min-width: 0；响应式需重设flex-direction；ie11须避gap、用flex: 1 1 0、禁空白字符。
flex容器嵌套时，子项的flex行为为什么突然失效？
因为父容器没设display: flex，或者子项被设了float/position: absolute——这两者会让元素脱离文档流，flex属性直接不生效。
常见错误现象：flex-grow没反应、justify-content对齐无效、子项堆在左上角不动。
- 检查每一层父容器是否都显式写了
display: flex（不能只靠继承） - 避免在flex子项上用
float或position: absolute；真要定位，用margin或align-self - 注意
flex-direction方向：外层是column，内层才是row，否则“行列”逻辑就反了
表单字段分组后，如何让每组内标签和输入框自动等宽对齐？
靠flex: 1不够，得配合min-width: 0防文字撑开，再用gap统一间距。
使用场景：地址字段（省/市/区三级下拉）、联系人信息（姓名+电话+邮箱横向排布）。
立即学习“前端免费学习笔记（深入）”；
- 给每组容器设
display: flex+gap: 8px（别用margin模拟间隙，维护性差） - 标签用
flex: 0 0 auto，输入框用flex: 1+min-width: 0（防长文本溢出破坏布局） - 如果输入框含
width内联样式，会覆盖flex，务必删掉
响应式断点下，flex嵌套导致换行错乱怎么办？
不是flex-wrap没开，而是子容器没重设flex-direction，或者flex-basis没随屏幕缩放调整。
性能影响：在移动端反复触发resize时，若用js监听改class，不如纯css媒体查询稳定。
- 外层容器用
flex-direction: column，内层用@media (min-width: 768px)切回row - 关键字段（如提交按钮）加
flex-basis: 100%确保它独占一行 - 避免对嵌套多层的flex容器同时设
flex-wrap: wrap，容易出现意外交叠
IE11兼容flex嵌套表单时，哪些写法必须规避？
gap、flex: 1简写、align-items: stretch默认值在IE11里表现异常，得降级处理。
兼容性影响：IE11下flex: 1可能让输入框宽度为0，gap完全不生效。
- 用
flex: 1 1 0代替flex: 1（明确flex-basis为0） -
gap替换成margin：给子项加margin-right，最后一项用:last-child清除 - 避免
align-items: center配height: 100%，IE11常导致垂直居中偏移
嵌套越深，IE11的计算误差越明显——建议三层以内封顶，超过就得拆成独立flex容器。另外，label和input之间别留空白字符，IE11会把它当文本节点参与flex排列。