FLEX弹性布局小结
2024-10-09 23:06:52
1. 弹性盒子中: flex: 0 1 auto表示什么意思
flex默认三个参数是flex-grow, flex-shrink, flex-basis,默认值是0 1 auto。
- flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大;
- flex-shrink属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小;
- flex-basis属性定义在分配项目占据的主轴空间,默认为auto。
2. flex布局下的子元素高度问题
- 当父元素没有设置高度时,其高度默认被最高子元素撑开,且其他元素默认横向主轴上的对齐方式(justify-content: flex-start);
- 当父元素设置了高度时,其高度以此为准,不会受子元素高度影响。但子元素超出部分依旧显示,而且块级格式化上下文也是正常根据父元素进行排列,所以有可能造成重复排列的情况,被flex布局的元素所覆盖。如下图片:
但如果父元素设置了高度,且设置了overflow:auto后,则超出部分则以滚动条形式展示。
- 子元素的高度也可以自行设置,超出部分默认会展示,跟父元素一样,需要设置overflow:auto,以滚动条形式展示。
最新文章
- OSG 3D场景渲染编程概述
- django 有model生成SQL以及现有反向表生成model
- 关于 Graph Convolutional Networks 资料收集
- XMLHttpRequest对象进行Ajax操作
- OneProxy与其它数据库中间件的对比
- Hibernate常见错误整理
- c函数调用过程原理及函数栈帧分析
- 在C#中生成唯一的字符串和数字【GUID】转
- 【USACO 1.4.4】母亲的牛奶
- (转)How to renew your Apple Push Notification Push SSL Certificate
- 使用StoryBoard设置Scrollview的横向滚动不用一行代码
- 【C语言探索之旅】 第三部分第二课:SDL开发游戏之创建窗口和画布
- Android中的对话框AlertDialog使用技巧合集-转载
- linux 下maven安装
- axis调用webservice的简单方法
- 使用xfire搭建webService服务
- django(权限、认证)系统——用户Login,Logout
- Exp6 信息搜集与漏洞扫描 20164303
- 发现一个微博图床API和图片上传代码
- springboot统一异常处理类及注解参数为数组的写法
热门文章
- 【学习笔记】陀螺 Treap
- salesforce零基础学习(九十七)Big Object
- Django( 学习第五部 Django之模板语法)
- day02初识判断和循环
- js内建函数reduce()
- [SuProxy]Ngnix+Lua 实现SSH2,LDAP,ORACLE,SQLSERVER等TCP/IP协议分析,劫持,代理,会话及负载
- Redis学习笔记(一)——安装Redis
- java数据结构-04单循环链表
- 利用transformer进行中文文本分类(数据集是复旦中文语料)
- CodeForces 1067E Random Forest Rank