![大尺寸撑爆[特殊字符]flex](http://pic.xiahunao.cn/yaotu/大尺寸撑爆[特殊字符]flex)
flex 容器里放固定大尺寸元素核心结论flex 子项默认min-width: auto,不会缩小到小于内容尺寸。放固定大尺寸元素会撑爆布局。代码示例/* ❌ 错误:固定宽度撑爆布局 */.container{display:flex;}.child{width:981px;}/* 会撑爆布局! */三种解决方案/* 方案 A:用相对宽度 */.child{width:100%;max-width:981px;}/* 方案 B:让子项脱离 flex */.child{position:absolute;width:981px;}/* 方案 C:允许子项缩小 */.container{min-width:0;}.child{flex:1;min-width:0;}一句话记忆flex 里放大尺寸元素会撑爆布局,用相对宽度或脱离 flex!
flex 容器里放固定大尺寸元素核心结论flex 子项默认min-width: auto,不会缩小到小于内容尺寸。放固定大尺寸元素会撑爆布局。代码示例/* ❌ 错误:固定宽度撑爆布局 */.container{display:flex;}.child{width:981px;}/* 会撑爆布局! */三种解决方案/* 方案 A:用相对宽度 */.child{width:100%;max-width:981px;}/* 方案 B:让子项脱离 flex */.child{position:absolute;width:981px;}/* 方案 C:允许子项缩小 */.container{min-width:0;}.child{flex:1;min-width:0;}一句话记忆flex 里放大尺寸元素会撑爆布局,用相对宽度或脱离 flex!
)
