当前位置: 首页 > Web前端 > CSS

flex-item的flex-grow和flex-shrink属性让我们来了解一下

时间:2023-03-30 16:20:42 CSS

前言flex布局,想必css江湖的侠客们都用的不少,下面说说flex下的几个不同-itemtoday是一个很常用的属性(其实我用的不多(┬_┬),好奇想了解一下)。从外形上看,长,缩,长,缩,哎哟,这不就是我这一年来减肥又长胖的节奏吗?╭∩╮( ̄▽ ̄)╭∩╮字面意思就是改变flex-item的body,符合flex自适应的概念。那么这两个属性是什么意思,有什么用呢?下面就来一探究竟吧。引用flex-grow、flex-shrink、flex-basis的三姐妹可以直接通过flex属性来包含,flex:flex-growflex-shrinkflex-basis,eg,flex:01auto;同意只懂这两个为什么又是flex-basis?因为当人变胖或者变瘦的时候,必然会有一个比较对象,需要和原来的元素进行比较。flex-basis是指item的内容宽度,与属性width作用相同,但两者有不同的优先级。如果同时设置了flex-basis和width,则以flex-basis为准;如果flex-basis设置为auto且width设置为精确的宽度值,则以width设置的宽度值为准;如果flex-basis设置为auto且未设置width,则flex-basis基于实际内容的宽度;如果一起变成张惠妹,那么我们已经有了一个基本的比较参考值,即容器中item的初始值宽度。我们看下面的例子:父容器container的宽度是600px,两个子元素的宽度分别是300px和100px,那么父容器在横轴上并没有被完全填满,而我只想任性又不想让别人看到元素背后的绿色呢?这时候我们使用flex-grow让元素自己变胖。http://jsfiddle.net/HqRunMan/...分别为两个子元素设置flex-grow。当然,如果你想变胖,大家一起变胖。但是flex-grow不一样,也就是说两个元素的fat因子不一样。flex-grow越大,分配的剩余空间的宽度就越宽。remaining(剩余分配空间):600px-300px-100px=200px一起长胖的能力:1+2=3灰灰需要接受的子元素宽度:(200*1/3)px=66.67px灰灰新体宽度=300px+66.67px=366.67px;子元素小菊需要接受的肉身宽度:(200*2/3)px=133.33px小菊的新bodywidth=100px+133.33px=233.33px;瘦如闪电的誓言还活着吗?让我们想象一下,子元素慧慧和小菊在幸福的生活中越来越胖,突然有一天回到家,发现家里的面积已经容不下他们了。伤心欲绝的她们决定用自己与生俱来的瘦身本领,拿起缩水胶,金光一闪,这个家终于可以容下她们了。http://jsfiddle.net/HqRunMan/...容器还是600px,灰灰500px,小橘子300px。您需要一起减去200px。但是灰灰和小菊的瘦身能力明显不同,他们分别设置了不同的flex-shrink,1和3。谁减肥能力强,谁就瘦。丢失的200px需要平分给灰灰和小菊每个px。remaining需要分配的空间:600px-500px-300px=-200px将所有px一起细化的能力:1*500+3*300=1400需要减少的子元素的宽度=(-200*(1*500)/1400)px=-71.42px细化后的灰度宽度=500px-71.42px=428.58px子元素小菊需要缩小的宽度=(-200*(3*300)/1400)px=-128.57px瘦身后小橘子的宽度=300px-128.57px=171.42px套用到这里,不得不实现一个老生常谈的话题“实现两栏布局”,脑子里飞快的转转,BFC,负边距,绝对定位,float+calc,并使用flex属性,查看代码:http://jsfiddle.net/HqRunMan/...左边列固定宽度,设置flex:00auto;关闭flex-grow和flex-shrink功能,宽度不会随resize改变;右边的内容,setflex:11auto;具有调整大小自适应宽度。综上,flex-basis可以作为width,但是要考虑width的优先级;在自适应过程中,flex-grow可以让未填充的宽度被元素占据;flex-shrink可以让容器空间不够大的子元素瘦身。