脚本宝典收集整理的这篇文章主要介绍了[前端系列] GOFLY在线客服系统代码-css属性flex: 1的使用实现自适应,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
当项目里实现自适应布局的时候,使用到了flex弹性布局
比如左边div 400px,右边div 自适应宽度
可以这样实现
.guideContent{ display: flex; } .guideContent .left{ width: 400px; background: #fff; margin-right: 20px; } .guideContent .right{ background: #fff; flex: 1; }
上面的意思是左边400px , 右边占据剩余所有空间
flex: 1的意思是
flex:1 1 auto 的简写
第一个参数是1 代表等分剩余空间
第二个参数是1 代表如果空间不足。项目比例将缩小
第三个参数是auto 代表项目的本来大小
以上是脚本宝典为你收集整理的[前端系列] GOFLY在线客服系统代码-css属性flex: 1的使用实现自适应全部内容,希望文章能够帮你解决[前端系列] GOFLY在线客服系统代码-css属性flex: 1的使用实现自适应所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。