- flex: 1的含义:
首先,flex是flex-grow,flex-shrink.flex-basis的缩写
flex: 1; === flex: 1 1 0%;
但是一直以来只知道flex-grow是剩余空间的比例系数,flex-shrink是超出父元素时子元素的收缩的系数,flex-basis 指定了 flex 元素在主轴方向上的初始大小,但是一直不知道到底是怎么一回事,到底应该怎么来计算呢
- flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时,如何分配这些剩余空间。其值为一个权重(也称扩张因子),默认为 0(纯数值,无单位),剩余空间将会按照这个权重来分配。
比如剩余空间为 x,三个元素的 flex-grow 分别为 a,b,c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum,是为权重也。
举个例子:
父元素宽度 500px,三个子元素的 width 分别为 100px,150px,100px。
于是剩余空间为 150px
三个元素的 flex-grow 分别是 1,2,3,于是 sum 为 6
则三个元素所得到的多余空间分别是:
150 * 1 / 6 = 25px
150 * 2 / 6 = 50px
150 * 3 / 6 = 75px
三个元素最终的宽度分别为 125px,200px,175px。
100px + 25px = 125px
150px + 50px = 200px
100px + 75px = 175px
- flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量
举个例子:
父元素 500px。三个子元素分别设置为 150px,200px,300px。
三个子元素的 flex-shrink 的值分别为 1,2,3。
首先,计算子元素溢出多少:150 + 200 + 300 - 500 = -150px。
那这 -150px 将由三个元素的分别收缩一定的量来弥补。
具体的计算方式为:每个元素收缩的权重为其 flex-shrink 乘以其宽度。
所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450
三个元素分别收缩:
150 * 1(flex-shrink) * 150(width) / 1450 = -15.5
150 * 2(flex-shrink) * 200(width) / 1450 = -41.4
150 * 3(flex-shrink) * 300(width) / 1450 = -93.1
三个元素的最终宽度分别为:
150 - 15.5 = 134.5
200 - 41.4 = 158.6
300 - 93.1 = 206.9
- flex-basis 指定了 flex 元素在主轴方向上的初始大小,其值可以填具体宽度,百分比,或者auto,当为auto时:无特定宽度值,取决于其它属性值
- 牛客的一道题
等主线程任务处理完,也就是全局中的任务var,而let会有块级作用域,所以当主线程执行完,也不会影响每个任务的i
- div p和div>p的区别和div+p的区别
- div p指div后面的p,不仅限于子元素,包括孙子元素
- div>p:仅div内的子元素p
- div+p是div紧跟的p元素,是兄弟关系
-
IPV4:32位
IPV6:128位 -
今天看前端兄弟的网易云项目,偶然看到他导入的整个文件夹竟然取到了全部的组件,吓得我自己也去试了试,发现报错了,尴尬…
原来是那个文件夹里面有个index.vue,就跟导入JS一个道理,如果里面有index.js,后面可以省略,至于为啥都能渲染,是因为index.vue引用了其他的组件。。。究极尴尬
- router-view并不看位置
今天试了下在子组件left里写 router-view,和父组件center里写,发现都是可以渲染的