对flex-grow和flex-shrink的深入理解
flex弹性布局,如果子元素宽度之和大于或者小于父元素宽度,空间就会存在剩余和不够,flex默认不换行,除非设置flex-wrap,那么这种情况下,有两个重要的属性,flex-grow和flex-shrink.
flex-grow默认值为0,用于子元素的宽度之和小于父元素的宽度时分配剩余空间,假如父元素宽度为1000,三个子元素,div1宽度200,div2宽度300,div3宽度300;三个子元素都不设置flex-grow,那么浏览器默认不自动分配剩余空间,剩余空间超出;假如给div1设置flex-grow:1,那么剩余1000-200-300-300=200px全部分配给div1;其他的子元素div2和div3不参与分配,即不设置此属性就不参与分配。
所以如果要参与分配,就要给子元素添加flex-grow属性。如果按照1:1:1,那么剩余空间就分成3等份,每个子元素分1/3,也可以设置2:2:2或者3:3:3,,但是结果和1:1:1是一样的,都是平均分配,没有意义。如果按照2:3:1,那么剩余空间分成6等份,每个子元素按照2/6,3/6,1/6去分配。
flex-shrink和flex-grow相反,默认值为1,子元素宽度之和超出父元素宽度,那么每个子元素就要按比例缩小以适应父元素。这时候给子元素设置flex-grow不起作用。即使不给子元素设置flex-shrink,浏览器也会根据子元素在子元素宽度之和的占有比例去缩小每个子元素,假如
父元素宽度600,div1宽度200,div2宽度300,div3宽度300,超出父元素200+300+300-600=200,这200在默认情况下浏览器会按比例给每个子元素均分减少,默认比例怎么算呢?先算出每个div占所有div宽度之和多少,上面三个div之和为800,那么三个div所占比例为:
div1:200/800=0.25
div2:300/800=0.375
div3:300/800=0.375
那么超出的200就按照上面这个比例去分配,所有div1宽度要减少200*0.25=50,div2减少200*0.375=75,div3减少200*0.375=75;所以即使不给子元素添加flex-shrink,浏览器最后会把三个子元素宽度缩小到150,225,225;如果想自定义减小某个子元素宽度,就要给相应的div设置flex-shrink, 其他不缩小的设置flex-shrink:0;
对flex-grow和flex-shrink的深入理解的更多相关文章
- flex 1与flex auto
flex意为"弹性布局" 这次主要探究的是flex:1与flex:auto的区别,flex是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 ...
- 杂项:flex (adobe flex)
ylbtech-杂项:Flex (Adobe Flex) Flex指Adobe Flex,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Appli ...
- flex:1和flex:auto详解
flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...
- flex html 用flex展示html
1. 目的 flex展示html 可以保护网页内容 2. 参考 http://stackoverflow.com/questions/260270/display-html-in-an-actions ...
- 微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- Flex外包公司——Flex案例展示
Flex案例展示 做的mail系统: http://gowebtop.com/webtop/ 在线购书网站 http://book.orzar.net/ eBay购物网站 http://www. ...
- [Flex+JAVA]建立Flex+java项目,并实现基本功能
1新建JAVA WEB项目 新建后的web文件包截图 3添加Flex项目,右键,添加.更改项目类型,天剑Flex项目类型
- (转)Flex开发工具Flex Builder 3 下载及注册码
本文转载自:http://blog.csdn.net/wlxtaking/article/details/5779762 Flex是通过java或者.net等非Flash途径,解释.mxml文件组织c ...
- 重新总结flex布局(flex,flex-direction,justify-content,align-items,flex-wrap,align-self)
1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...
随机推荐
- Ubuntu ssh免密登录
ssh免密登录工作原理 server A免登录到server B: 1.在A上生成公钥私钥. 2.将公钥拷贝给server B,要重命名成authorized_keys(从英文名就知道含义了) 3.S ...
- 反射-Class
package classes; public class ClassDemo1 { public static void main(String[] args){ Foo foo1 = new Fo ...
- Runtime.getRuntime()
1转自:https://www.aliyun.com/jiaocheng/849282.html 那就首先说点Runtime类吧,他是一个与JVM运行时环境有关的类,这个类是Singleton的.我说 ...
- 塞尔达:旷野之息个人对比上古卷轴V:天际
上古卷轴5是我之前玩过最优秀的作品.玩塞尔达的时候就有跟上古卷轴5比对,真的都是神作.两个游戏的自由度都是真的高. 主线剧情上,老滚5印象不深了,当时就知道战斗,只记住了开头砍头现场,还有奥杜因这个龙 ...
- sublime text3设置
我的sublime的设置,ps:这个博文只是为了我自己的一个记录 { "color_scheme": "Packages/Theme - Solarized Flat/S ...
- C# 中的迭代器 yield关键字 提高性能和可读性
展示一个例子 IList<string> FindBobs(IEnumerable<string> names) { var bobs = new List<string ...
- 2019计蒜之道初赛3 D. 阿里巴巴协助征战SARS(困难)(大数取余+欧拉降幂)
阿里巴巴协助征战SARS(困难) 33.29% 1000ms 262144K 目前,SARS 病毒的研究在世界范围内进行,经科学家研究发现,该病毒及其变种的 DNA 的一条单链中,胞嘧啶.腺嘧啶均 ...
- 杭电1002_A + B Problem II
这是该题的链接http://acm.hdu.edu.cn/showproblem.php?pid=1002 具体的题的内容就不过多描述了,想必你已经知道了,当我看完这道题后就知道咋写了,可是这道题从开 ...
- (function (window, document, undefined) {})(window, document)什么意思?
1.IIFE(即时调用的函数表达式),它采取以下表达式: (function (window, document, undefined) { // })(window, document); Java ...
- Keras AttributeError 'NoneType' object has no attribute '_inbound_nodes'
问题说明: 首先呢,报这个错误的代码是这行代码: model = Model(inputs=input, outputs=output) 报错: AttributeError 'NoneType' o ...