flex 自适应
flex-grow、flex-shrink、flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的。
其中,这三个属性都是在子元素上设置的。
注:下面讲的父元素,指以flex布局的元素(display:flex)。
flex-basis
该属性来设置该元素的宽度。当然,width
也可以用来设置元素宽度。如果元素上同时设置了width
和flex-basis
,那么flex-basis
会覆盖width
的值。
flex-grow
该属性来设置,当父元素的宽度大于所有子元素的宽度的和时(即父元素会有剩余空间),子元素如何分配父元素的剩余空间。
flex-grow
的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。值越大,索取的越厉害。
举个例子:
父元素宽400px,有两子元素:A和B。A宽为100px,B宽为200px。
则空余空间为 400-(100+200)= 100px。
如果A,B都不索取剩余空间,则有100px的空余空间。
如果A索取剩余空间:设置flex-grow为1,B不索取。则最终A的大小为 自身宽度(100px)+ 剩余空间的宽度(100px)= 200px
如果A,B都设索取剩余空间,A设置flex-grow为1,B设置flex-grow为2。则最终A的大小为 自身宽度(100px)+ A获得的剩余空间的宽度(100px * (1/(1+2))),最终B的大小为 自身宽度(200px)+ B获得的剩余空间的宽度(100px * (2/(1+2)))
flex-shrink
该属性来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。
flex-shrink
的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。
举个例子:
父元素宽400px,有两子元素:A和B。A宽为200px,B宽为300px。
则A,B总共超出父元素的宽度为(200+300)- 400 = 100px。
如果A,B都不减小宽度,即都设置flex-shrink为0,则会有100px的宽度超出父元素。
如果A不减小宽度:设置flex-shrink为0,B减小。则最终B的大小为 自身宽度(300px)- 总共超出父元素的宽度(100px)= 200px
如果A,B都减小宽度,A设置flex-shirk为3,B设置flex-shirk为2。则最终A的大小为 自身宽度(200px)- A减小的宽度(100px *
(200px *
3/(200 *
3 + 300 *
2))) = 150px,最终B的大小为 自身宽度(300px)- B减小的宽度(100px *
(300px *
2/(200 *
3 + 300 *
2))) = 250px
最新文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统 (源码购买说明)
- Linux2.6内核进程调度系列--scheduler_tick()函数3.更新普通进程的时间片
- <;base>;元素
- SAP 创建物料主数据分类视图特性
- 线程池ThreadPool知识碎片和使用经验速记
- AEAI Portlet开发心得
- c8051f320学习,单片机不外乎时钟、IO、串口、USB等外设用法
- MyEclipse破解(MEGen.java)
- ifconfig
- 【读书笔记】iOS-防止通讯协议被轻易破解的方法
- 发现一个jq的问题
- 【Cocos2d入门教程三】HelloWorld之一目了然
- OWIN初探(转)
- 我读《通过Go来处理每分钟达百万的数据请求》
- Web API 之承载宿主IIS,SelfHost,OwinSelfHost
- 全面认识openstack:OpenStack架构详解
- 全球第一免费开源ERP Odoo WMS库存管理高级路线设置详解
- unity中编辑器直接截屏代码
- 原生sql实现restful接口调用
- Hexo初体验