博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
flex属性值flex-grow/flex-shrink/flex-basis
阅读量:6271 次
发布时间:2019-06-22

本文共 767 字,大约阅读时间需要 2 分钟。

flex的三个属性值(三个值都不支持负数):

flex-grow:设置剩余空间分配情况。flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害。不允许负值。

flex-shrink:父元素宽度小于子元素宽度之和时,子元素如何缩小自己的宽度的。默认值为1时表示超出地方平均分配。设置值越大,减小的越厉害。如果值为0,表示不允许收缩,设置多大就多大,当都设置为0是子元素会超出父元素。

flex-basis:该属性用来设置元素的宽度,其实,width也可以设置宽度。如果元素上同时设置了width和flex-basis,那么width 的值就会被flex-basis覆盖掉。basis简单理解就是在计算剩余空间分配前去掉的空间,值为auto/具体的width/0。

简写为flex:

flex:flex-grow  flex-shrink  flex-basis;

第一个写flex-grow 第二个为flex-shrink第三个flex-basis,中间用空格隔开。

几个特殊的值:

flex:1 0 auto;

flex:none;等同于flex-grow=0;flex-shrink=0;flex-basis=auto;

flex:0;等同于flex-grow=0;flex-shrink=0;flex-basis=0;

在flex设置为单个数字时;

例如:flex=1;等同于flex-grow=1;flex-shrink=1;flex-basis=0;

这个数字仅表示flex-grow,而无论值为多少,flex-shrink始终为1,flex-basis始终为0;

 

转载于:https://www.cnblogs.com/qianphong/p/10615613.html

你可能感兴趣的文章
Splunk作为日志分析平台与Ossec进行联动
查看>>
yaffs文件系统
查看>>
Mysql存储过程
查看>>
NC营改增
查看>>
Lua
查看>>
Mysql备份系列(3)--innobackupex备份mysql大数据(全量+增量)操作记录
查看>>
postgresql 获取刚刚插入的数据主键id
查看>>
C# Activex开发、打包、签名、发布 C# Activex开发、打包、签名、发布 [转]
查看>>
05-Vue入门系列之Vue实例详解与生命周期
查看>>
验证码展示
查看>>
浅谈大型web系统架构
查看>>
淘宝大秒系统设计详解
查看>>
linux如何修改登录用户密码
查看>>
Kali Linux 2017中Scapy运行bug解决
查看>>
Python监控进程性能数据并画图保存为PDF文档
查看>>
Android属性动画完全解析(下),Interpolator和ViewPropertyAnimator的用法
查看>>
Mac OS 10.10.3下Apache + mod_wsgi配置【一】
查看>>
Hibernate基于注解的双向one-to-many映射关系的实现
查看>>
算法竞赛入门经典 例题 3-2 蛇形填数
查看>>
remove-duplicates-from-sorted-list I&II——去除链表中重复项
查看>>