flex布局中子元素height:100%无效主因是父容器缺显式高度；应优先用flex:1实现自适应高度，需确保父容器有高度基准（如100vh），并避免与height混用。

直接从Flex布局入手做个人主页最高效，用语义化HTML结构（header/main/footer）配合flex-direction:column、flex:1和min-height:100vh实现响应式粘底布局。

flex布局中用margin-left:auto推最后一个元素靠右的原理是利用flex剩余空间分配机制：该元素“吃掉”左侧所有可用外边距，从而右移；需父容器display:flex且子元素为直系子项，不可混用justify-content:flex-end或设置flex-grow:1。

flex-grow实现列宽弹性分配需父容器display:flex且子项无固定宽度；flex-grow:1均分剩余空间，与flex-grow:2共存时按2:1分剩余空间；响应式需媒体查询配合flex-direction切换或flex-wrap+flex-basis控制；flex-basis比width更适合因它是初始尺...

应改用display:flex布局替代float，为每组表单项容器设flex并垂直居中，统一box-sizing，避免在根form上直接设flex，注意Safari兼容性及键盘弹出异常。

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