[上海|结业弟子]JS-赵朋|2019年09月11日的日报-技能树.IT修真院

发表于： 2019-09-11 22:39:25

1 813

今天完成的事

1.继续修改任务5

遇到问题.main3边框向左收缩，与示例不符合

询问师兄，找到解决办法，为盒子设置flex-shrink: 0;属性，解决

代码

.main_3{

height: 30px;

width: 121px;

border-style: none solid none none;

border-width: 3px;

border-color:rgb(153,153,153);

flex-shrink: 0;

}

开始学习flex-shrink的含义

实例解析：

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中实例解析：

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2

我们可以看到父容器定义为 500px，子项被定义为 120px，子项相加之后即为 600 px，超出父容器 100px。那么超出的 100px 需要被 A、B、C、D、E 消化通过收缩因子，所以加权综合可得 100*1+100*1+100*1+100*2+100*2=700px。

于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：

A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。

于是我们可以计算 A、B、C、D、E 将被移除的溢出量是多少：

A 被移除溢出量：(100*1/700)*100，即约等于14px
B 被移除溢出量：(100*1/700)*100，即约等于14px
C 被移除溢出量：(100*1/700)*100，即约等于14px
D 被移除溢出量：(100*2/700)*100，即约等于28px
E 被移除溢出量：(100*2/700)*100，即约等于28px

最后A、B、C、D、E的实际宽度分别为：120-14=106px, 120-14=106px, 120-14=106px, 120-28=92px,120-28=92px，此外，这个宽度是包含边框的。

一开始我的理解事， A、B、C 显式定义了 flex-shrink 为 1，D、E 定义了 flex-shrink 为 2，所以计算出来总共将剩余空间分成了 7 份，其中 A、B、C 占 1 份，D、E 占 2 份，即1:1:1:2:2

那么显示的宽度abcde的比也应该是1：1:1:2:2,但事实是d，e反而比abc小，

在详细的看了解释之后，才明白这个比例是缩进的比例，即超出100px，那么分摊到每个子元素的比例就为1；1；1；2；2，所以a移除进1/7,d是2/7,反之，也是a增加1/7,d增加2/7

所以flex-shrink默认值为1

flex-shrink:0不参与缩放

遇到问题

文本框在变窄之后，会溢出

font-size 字体大小

font-weight 字体粗细