前言
最近公司在招聘，经常会问到应试者一个问题，“flex: 1 是哪些属性的缩写？”，很多同学答的都不是很好，今天我们来理解一下。
flex：1是哪些属性的缩写
flex：1 是 flex-grow: 1, flex-shrink: 1,flex-basis: 0% 的缩写；
解释下flex-grow
flex-grow是将剩余的空间，根据flex-grow的值平分，然后加到flex-basis上
可以看到子元素的flex-basis加起来是240px，父容器分完以后剩下260px，ABCD的flex-grow加起来10，那么每一份是26px，最终AB是60px + 26px = 86px，CD是60px + 26px * 4 = 164px。
是不是特别像老爷子突然噶了留下500块钱的遗产，兄弟4个来分，老大和老二说“我要60块钱，如果有多的可以再给我来一份”，老三和老四说“我们也要60块钱，如果有多的我们要四份”。最终老大和老二分到86，老三老四分到164，大家还都挺满意。
解释下flex-shrink
flex-shrink是将多出的空间根据flex-shrink的值平分，然后flex-basis减去分到的值
可以看到子元素的flex-basis加起来是600px，而父容器只有500px，那么少的100px，就得从ABCD往出扣，ABCD的flex-shrink加起来是10，那么每一份就是10px，最终AB是150px - 10px = 140px，CD是150px - 10px * 4 = 110px;
是不是特码像老父亲在外面吃喝嫖赌欠下500块钱的巨大债务，父债子偿嘛，兄弟4人出钱，老大和老二说"我们一人出150，超出部分我要收回1成"，老三和老四说“我们也出150块钱，超出部分我要收回4成”。最终老大和老二出140块钱，老三老四出110块钱。
改正
jym，关于flex-shrink的计算错啦，在此感谢一下@忍者扔飞镖 我再来解释一下
要扣除的容量计算是没有问题的，还是子元素的flex-basis加起来减去父元素的宽度。
平分的比例是子项目的flex-basis * flex-shrink 除以每个子项目的flex-basis * flex-shrink之和。
上面例子
A的flex-basis 是100px， flex-shrink 是 1
B的flex-basis 是200px， flex-shrink 是 1
C的flex-basis 是300px， flex-shrink 是 4
D的flex-basis 是500px， flex-shrink 是 4
要平分的容量 NT = 100 + 200 + 300 + 400 - 500 = 500
最终A的宽度 = 100 - 100 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 83.87096774193549
B的宽度 = 200 - 200 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 167.74193548387098
C的宽度 = 300 - 300 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 106.45161290322582
D的宽度 = 400 - 400 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 141.93548387096774
这个计算真的有点出乎意料，不知道为什么要这么设计
结尾
通过上面例子想必大家对flex有了新的认识，最后给大家留个作业。
老父亲突然又噶了四个孩子不知道老父亲是有存款还是有负债，老大和老二说“如果老爸有遗产我要100块钱，多出来的我要1成，如果有负债我出100块钱，超出的我要收回4成”，老三和老四说“如果老爸有遗产我要100块钱，多出来的我要2成，如果有负债我出100块钱，超出的我要收回2成”，用flex如何表示？