表单控件在flex布局中不收缩是因浏览器默认min-width（如input为180px），需显式设min-width:0使其可压缩；固定宽则用flex-shrink:0。

导航栏居中失效的主因是父容器未设display:flex；需确保nav等外层容器启用Flex布局，设置height并避免text-align干扰，li/a统一重置样式。

浮动元素脱离文档流导致父容器高度塌陷，clearfix通过伪元素插入清除浮动的块级内容来修复，现代推荐display:flow-root或flex布局替代。

flex布局中表单字段自动换行需设flex-wrap:wrap，并配合flex-basis或min-width控制单字段宽度；响应式断点应基于内容自然折行位置，优先用min-width媒体查询和rem单位；label与input应对齐需包裹在独立flex容器中；flex比grid更适配动态增减字段的表单。

gap在flex布局中生效的前提是父容器必须设置display:flex或inline-flex；仅设flex-wrap:wrap而无display:flex会导致gap失效。

flex等宽应设flex:110且min-width:0；grid三列等宽用repeat(3,1fr)，并加overflow-wrap:break-word防撑开。