[前端系列] GOFLY在线客服系统代码-css属性flex: 1的使用实现自适应
[前端系列] GOFLY在线客服系统代码-css属性flex: 1的使用实现自适应
唯一Chat
发布于 2021-11-02 16:53:27
发布于 2021-11-02 16:53:27
当项目里实现自适应布局的时候，使用到了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 代表项目的本来大小
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-10-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读