[前端系列] GOFLY在线客服系统代码-css属性flex: 1的使用实现自适应
2023-02-18 15:36:15 时间
当项目里实现自适应布局的时候,使用到了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 代表项目的本来大小
相关文章
- Linux 命令(235)—— mktemp 命令
- Linux连接数
- Linux 将Shell脚本转换为C
- proto vs gzip proto in golang
- 基于go语言的声明式流式ETL,高性能和弹性流处理器
- C/C++ 实现远程线程DLL注入
- C/C++ 实现远程代码注入
- 嵌入式:ARM嵌入式系统开发流程概述
- 嵌入式:ARM常用开发编译软件介绍
- C++——构造函数的使用注意事项及static用法
- 嵌入式系统底层软件的复杂性
- git 命令别名配置
- C和C++安全编码复习
- git 无法提交空目录 ? (.gitkeep 文件的作用)
- PHP 字符串中 {} 的使用
- PowerShell 反弹渗透技巧
- Kali Linux安装AWVS漏扫工具
- brew 安装 nginx 配合PHP工作
- Linux 系统的安全加固
- C/C++ 编写并提取简易 ShellCode