flex-grow 和 flex-shrink 的计算公式

一直知道的概念是按照比例来计算,今天,朋友问起,仔细验证了一下具体的公式。比如我们先看下面的例子。

flex-grow

<div style="display:flex; width:100px;height:100px">
  <div style="width:10px;flex-grow: 5; background:red;"></div>
  <div style="width:40px;flex-grow: 2; background:blue;"></div>
  <div style="width:30px;flex-grow: 1; background:pink;"></div>
</div>

父元素的宽度是 100px,3 个子元素的宽度是 10、40、30,加起来是 80px,那么还需要剩下 20px 需要填充。每个子元素能分得多少呢?以第一个子元素为例。

5 / (5 + 2 + 1) * 20 + 10 = 22.5。第一个子元素占比 8 分之 5,乘以 20px,再加上原来的 10px,就是 22.5px。可以审查一下元素,验证我们的想法。

flex-shrink

<div style="display:flex; width:60px;height:100px">
  <div style="width:10px;flex-shrink: 5; background:red;"></div>
  <div style="width:40px;flex-shrink: 2; background:blue;"></div>
  <div style="width:30px;flex-shrink: 1; background:pink;"></div>
</div>

再看 flex-shrink。父级元素的宽度是 60px,子元素分别是 10、40、30px,加起来是 80px,那需要收缩 20px。怎么计算第一个子元素的宽度呢?如下:

10 – 5 * 10 / (10 * 5 + 40 * 2 + 30 * 1) * 20,意思是,原来子元素的宽度是 10px,它需要收缩的像素是用自身的宽度,乘以 shrink 这个权重值,再除以整个子元素的宽度乘以 shrink 权重值之和,再乘以整个收缩的 20px。

再审查元素,验证一下结果,也是对的。

我们发现了一点,grow 和 shrink 的计算方式不同,为什么呢?我觉得有 2 点。

  1. grow 这样算,很符合直觉,能够解决问题,心智模型简单。
  2. shrink 的方式更复杂一点,那是为了保证,所有的子元素塌陷后,不会出现负值,按照 grow 的算法的话就会。

以上,感谢阅读。

去 codepen 自己试一试

See the Pen flex-shrink by zeng (@zengxiaoluan) on CodePen.

canvas 画文字模糊的问题

在 mac 下的 chrome 当你按下 command + + 的时候会放大网页,这时 devicePixelRatio 会发生变化,默认情况下这个值为 1,当网页放大到 250% 时,这个值会变成 2.5。我们在 canvas 画图写字,就要处理 devicePixelRatio 这个变量的改变,这和高清屏是一样的道理。

下面是一个例子,如论你的 devicePixelRatio 是多少,文字和图片都可以正常显示。可以通过缩放网页,来修改此值。

继续阅读“canvas 画文字模糊的问题”

我好像变成一个很负面的人?

2022-09-30

9.25 yTY:/ 复制打开抖音,看看【曾小乱的作品】湘潭和达滨江花园交房指日可待!# 复工复产 # 买房那…

https://v.douyin.com/6WVKU7o/

今天讨论搞个复工的仪式有没有必要? 没必要

钱不是印出来的,拿着业主的钱搞形式主义。不是自己的钱,怎么花都不心疼,一旦花上了自己的钱,哪怕是一碗肠粉的钱,都是铁公鸡一般。组织如此,人亦是如此 很多人没有这种意识,相关部门花的是纳税人的钱,不是国家的钱。我们的企业也一样,缺乏基本的对消费者的尊重 ​

如果说有必要。那就是提振房地产市场的信心,很多人还没有上车,要让他们看到希望。是一种外宣,明年能不能交房,拭目以待

继续阅读“我好像变成一个很负面的人?”

买的房子又停工了

2022-05-31

The aim is to evaluate the given mathematical expression by applying the basic mathematical rules. Let’s understand how we could implement the problem using different approaches.

https://leetcode.com/problems/basic-calculator-ii/

连续做了 2 道计算表达式的题,已经麻了,想起了一句论语:学而不思则罔 思而不学则殆,还是得注重学习。

2022-05-30

Fabrice Bellard 是个什么水平的程序员? – Hao Lee的回答 – 知乎

https://www.zhihu.com/question/28388113/answer/150897437

他的作品看都看不懂

继续阅读“买的房子又停工了”

算一个不成熟的算术题

和某个朋友聊天,说我买了一个便宜的房子。说到便宜这个字,我就有意见了,似乎大家都觉得买十几万一平的房子才是真的房子,才配说买了房。

现在的房子除了基本的商品属性,反而金融属性更显得重要。你卖个房子,总是要赚钱才合理,但是你想想你的房子有折旧,像汽车一样,买回来 10 万,能 20 万卖出去嘛。可见这市场已经很畸形了,在人类市场什么东西只涨不跌?

继续阅读“算一个不成熟的算术题”

等额本息的求解之路

房贷计算器

等额本息

年利率:
贷款金额(万元):
贷款期数:
期数 每月还款 当月还的本金 累计还的本金 还欠的本金 当月还的利息 累计还的利息 累计还的利息 + 累计还的本金
{{n}} {{perMonthMoney}} {{c1.get(n)}} {{c2.get(n)}} {{c5.get(n)}} {{c4.get(n)}} {{c3.get(n)}} {{c6.get(n)}}

等额本息的意思是,本金加利息是等额的,所以每个月的还款额是一样的。等额本金说的是每个月还的本金是一样的,所以随着本金越还越少,则相应的利息部分越来越少。

假设我们借了 12 万块,等额本息,分 12 个月还,那么我们可以列出这样的等式,来理解计算过程,帮助我们求出每个月的还款额。其中 p 表示月利率,月利率等于年利率除以 12 个月,A 是我们要求的每月还款额。在这个例子中,我们假设年利率为百分之 6.

a0 = 12;# 这表示我们借了 12 万的本金

a1 = a0 * (1 + p) - A; # 第一个月的利息加本金,减去还款额 A,表示还款了一个月后,未还的钱

a2 = a1 * (1 + p) - A; # 以此类推

an = an-1 * (1 + p) - A; # 当第 12 月的时候,全部还完,当 n =12 时,则这个等式的左右 2 边都为 0。

怎么根据这些例子来求出 A 值呢,我先编程实现了这样一段代码。

继续阅读“等额本息的求解之路”

这个月发的很多,被微信封了

2022-08-31

推荐《王局拍案》,王志安估计成了敏感词,这条也发不出去。

https://www.youtube.com/watch?v=ku0rzbCxJaI

2022-08-30

wsc:每天测的不是阳性或者阴性,而是奴性或者血性。

​微信公众号发文,稍微有点不正能量的东西,发不出,即便发出也会被删。所以我不想在这里发了,我们每天看的东西都是被筛选过的,而且被筛的太严重了。电影《逃出绝命镇》,黑人老哥有一句台词:休想在我脑里植入什么东西。

继续阅读“这个月发的很多,被微信封了”

求两直线的交点

继续阅读“求两直线的交点”

烂尾停贷月

2022-07-31

马克思讲劳动的异化,什么劳动的异化?人的本质就是需要工作的,产生价值,从而获得幸福,比如我爷爷八十了,还要扛着锄头翻来覆去。但是资本的社会,人的劳作是为了生存,典型的特征是干的越久生活还是穷困。

以前的人追求每天10小时,我觉得我们可以追求一下寒暑假,出于职业的公平性。像我在外

继续阅读“烂尾停贷月”