[前端系列] GOFLY在线客服系统代码-css属性flex: 1的使用实现自适应
2023-02-18 15:36:32 时间
当项目里实现自适应布局的时候,使用到了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 代表项目的本来大小
相关文章
- 教你配置windows上的windbg,linux上的lldb,打入clr内部这一篇就够了
- MongoDB 在评论中台的实践
- 使用mongodb作为Quartz.Net下的JobStore实现底层的持久化机制
- mongodb之使用explain和hint性能分析和优化
- mongodb 3.x 之实用新功能窥看[2] ——使用$lookup做多表关联处理
- mongodb 3.x 之实用新功能窥看[1] ——使用TTLIndex做Cache处理
- 双十一来了,别让你的mongodb宕机了
- GO语言开发环境搭建笔记
- PHP判断网络连通
- 开启phpMyAdmin的远程登录
- PHP_cURL初始化和执行方法
- PHP经典函数收集
- PHP所有函数列表
- php bbcode过滤
- php不使用中间变量交换两个变量的值
- 嵌入式:ARM异常中断指令SWI、BKPT、CLZ详解
- 嵌入式:ARM协处理器指令总结
- C++ 中的卷积神经网络 (CNN)
- 一个git仓库多个项目配置pre-commit代码校验
- 搭建PHP开发环境(PHPStorm+PHPStudy)