flex的小米面试题

​

 题目:

题目1:求每个盒子的宽度是多少?(放大问题)

			* {
				padding: 0;
				margin: 0;
			}
			.container {
				width: 600px;
				height: 300px;
				display: flex;
			}
			.left {
				flex: 1 2 300px;
				background: red;
			}
			.right {
				flex: 2 1 200px;
				background: blue;
			}

 分析:这里是空间有剩余， 所以会平分剩余空间 600 - 300 - 200 = 100 

 然后将left和right各自需要的份数算出来， left要 1/3  right要2/3 。只看flex复合属性的第一个值，就是flex-grow的值，第二个是flex-shrink 是否缩小，不用看.

left盒子宽度.300+100*0.333...

righ盒子宽度t:200+100*0.666...

放大问题编辑简单,关键是缩小问题

题目1:求每个盒子的宽度是多少?(缩小问题)

			.container {
				width: 600px;
				height: 300px;
				display: flex;
			}
			.left {
				flex: 1 2 500px;
				background: red;
			}
			.right {
				flex: 2 1 400px;
				background: blue;
			}

分析过程:宽度有600， 但是left和right分别加起来是 500+400 = 900 的宽度 所以意味着每个都要进行缩小,这里关键是要算left和right每个需要缩小多少比例?

 一共要缩小 900 - 600 = 300的宽度

  那么left 共有500的宽度，各要缩小多少呢，要算比例，

  思路:这里我们把缩小先当成放大来看先算比例,分母5002 + 4001,左边500*2占分母的多少份就是要缩小的比例

     所以 left = 500 - 300*(5002/ (5002 + 400*1))

     所以 right= 400 - 300*(4001/ (5002 + 400*1))

​