flex-shrink 将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素,每个子元素原本宽度减去按比例分配的值,其剩余值为实际宽度。
以原有例子为模型,父元素命名为div0,1-5五个子元素分别命名为div1、div2、...、div5。
父元素需要设定:
display:flex,width:350px
所有子元素需要设定:
flex-basis:100px, 即不发生收缩时子元素原本的宽度
以上为先决条件。
子元素宽度之和与父元素宽度的差值:
100*5-350=150px
这时通过设定子元素的flex-shrink属性来决定150px总缩减量如何分配给5个子元素。
按照之前的预设,div2 的实际宽度为其它子元素的 1/3。
设子元素的宽度分别为w1、w2、...、w5,div2的flex-shrink值与其它子元素flex-shrink的值之比为X,有如下方程组:
w1=w3=w4=w5=100-150(1/X+4) w2=100-150(X/X+4) w1=w3=w4=w5=3w2
解方程组得
X=19/5,w2=26.92,w1=w3=w4=w5=80.77
绘制太阳系各大行星运行轨迹:
<div class="solarsys"> <!--太阳--> <div class='sun'></div> <!--水星轨道--> <div class='mercuryOrbit'></div> <!--水星--> <div class='mercury'></div> <!--金星轨道--> <div class='venusOrbit'></div> <!--金星--> <div class='venus'></div> <!--地球轨道--> <div class='earthOrbit'></div> <!--地球--> <div class='earth'></div> <!--火星轨道--> <div class='marsOrbit'></div> <!--火星--> <div class='mars'></div> <!--木星轨道--> <div class='jupiterOrbit'></div> <!--木星--> <div class='jupiter'></div> <!--土星轨道--> <div class='saturnOrbit'></div> <!--土星--> <div class='saturn'></div> <!--天王星轨道--> <div class='uranusOrbit'></div> <!--天王星--> <div class='uranus'></div> <!--海王星轨道--> <div class='neptuneOrbit'></div> <!--海王星--> <div class='neptune'></div> </div>
尝试一下 »
简单的鼠标悬浮过渡效果:
div{ width: 200px; height: 200px; background-color: #f00; transition: all 2s; } div:hover{ background-color: #00f; transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg); }
写 box-shadow 的依次顺序为:
h-shadow v-shadow blur spread color insect 水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影
CSS 中 border: 1px solid rgba(0, 0, 0, 0.1); 是什么意思?
意思是: 设定元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。
其中,rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值(0-255),最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1,越接近 1,代表透明度越低。
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
561flex-shrink
flex-shrink 将子元素宽度之和与父元素宽度的差值按照子元素 flex-shrink 的值分配给各个子元素,每个子元素原本宽度减去按比例分配的值,其剩余值为实际宽度。
以原有例子为模型,父元素命名为div0,1-5五个子元素分别命名为div1、div2、...、div5。
父元素需要设定:
所有子元素需要设定:
flex-basis:100px, 即不发生收缩时子元素原本的宽度
以上为先决条件。
子元素宽度之和与父元素宽度的差值:
这时通过设定子元素的flex-shrink属性来决定150px总缩减量如何分配给5个子元素。
按照之前的预设,div2 的实际宽度为其它子元素的 1/3。
设子元素的宽度分别为w1、w2、...、w5,div2的flex-shrink值与其它子元素flex-shrink的值之比为X,有如下方程组:
解方程组得
446CSS3 动画
绘制太阳系各大行星运行轨迹:
尝试一下 »
445CSS3 过渡
简单的鼠标悬浮过渡效果:
尝试一下 »
444CSS3 文本效果
写 box-shadow 的依次顺序为:
443CSS3 渐变
CSS 中 border: 1px solid rgba(0, 0, 0, 0.1); 是什么意思?
意思是: 设定元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。
其中,rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值(0-255),最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1,越接近 1,代表透明度越低。