本文由 简悦 SimpRead 转码， 原文地址 mp.weixin.qq.com
点击上方 三分钟学前端，关注公众号
回复交流，加入前端编程面试算法每日一题群
面试官也在看的前端面试资料
前言
今天第一次面试的我无比紧张，面试遇到一个很好的面试官，让人感觉很亲切。当面试官问我的问题不懂时，面试官会让去我百度，了解后再解释给他听，然而百度我也找不到，只能尴尬的说不会，让面试官给我解释这个问题。在面试最后和面试官聊天的过程中也很愉悦，也给了我很好的建议。下面我将给大家介绍我的面试题！
flex：7 1 100px 中这三个参数你知道什么意思吗？
下面我们通过例子来解释一下吧！
flex 子元素伸缩属性
第一个参数表示: flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
1. 扩大情况
<style> .item { display: flex; width: 500px; height: 100px; } .item0 { width: 50px; flex: none; background-color: red; } .item1 { flex: 1 1 50px; background-color: green; } .item2 { flex: 7 1 100px; background-color: blue; } </style> <body> <div class="item"> <div class="item0">0</div> <div class="item1">1</div> <div class="item2">2</div> </div></body>看到上面的效果来分析结果吧
为什么 item0 设置的是 50px，还是 50px 呢？
为什么 item1 设置的是 50px，怎么变成 87.5px 呢？
为什么 item2 设置的是 100px，怎么变成 362.5px 呢？
当空间充足时，flex子项的宽度计算公式是： 自身的基础宽度 + 容器剩余宽度 *（自身伸张比例 / 所有子项伸张比例之和），要注意两种缩写
flex:none 是 flex: 0 0 auto 的缩写
flex:num 是 flex:numb 1 0% 的缩写。如 flex：1 => flex: 1 1 0%。
我们在 item 中设置了总得容器宽度为 500px，容器中的 item0、itme1、item2 分别先占有自身的基础宽度，容器中剩余宽度则采用放大比例来进行放大。
剩余宽度 ：500 - 50 - 50 - 100 = 300
item0 本身宽度设置了 50px，flex: none 等价于 flex: 0 0 auto，所有 item0 不参与放大, 还是 50px
item0 宽度：50 + 300*（ 0 / (0+1+7）) = 50
item1 本身宽度设置的是 flex: 1 1 50px 中的第三个参数的值 50px，当是扩大的情况下，我们只要看第一个参数就好了，item0 的第一个参数是 0，item1 的第一个参数是 1，item2 的第一个参数是 7，所以容器剩余宽度将会被分为 8 份，item1 占一份，即为 37.5px，item1 总的宽度为 87.5px
item1 宽度：50 + 300 * (1 /（0+1+7）) = 87.5
item2 同理可得，item2 占 7 份，即为 262.5，item2 总的宽度为 362.5
item2 宽度：100 + 300 *（ 7 /（0+1+7））= 362.5
2. 缩小情况
<style> .item00 { display: flex; width:300px; height: 100px; } .item0 { width:300px; background-color: red; } .item1 { flex: 1 1 100px; background-color: green; } .item2 { flex: 2 2 200px; background-color: blue; } </style>1.png
2.png
3.png
当
空间充足不足时，flex子项的宽度计算公式是： 自身的基础宽度 \- 超出宽度 *(自身宽度*收缩比例/总权重）
超出宽度 = 300+100+200-300=300
总权重 = 300 * 1+100* 1+200*2=800 // 理解一下总权重如何得出
item1 的宽度 = 300 - 300 * 300*1/800 =300 - 112.5=187.5；(只有 width 属性时，flex 的属性值是 0 1 auto, 空间不足时也会收缩)
item2 的宽度 = 100 - 300 * 100*1/800 =100 - 37.5=62.5；
item3 的宽度 = 200 - 300 * 200*2 /800 =200-150=50；
注意 flex:num 这种缩写写法，展开相当于 flex:num 1 0%，此时的 flex-basis 是 0%, 不是设置的 width；计算总权重时该项的权重为 0
将头像边框改为圆？
6.png
原来的 css 样式修改后的 css 样式
问题来了，面试官问我为什么 20px 可以，24px 也可以，那么多少 px 最合适呢？（这里的意思是不能随意写一个数字）你怎么得出来的？
回答：长度和宽度相等，border-radius 设置为长度（宽度）的一半。因为这个头像的长宽都是 32px，所以最合适的就是 16px。评论区指出使用border-radius:50% 更好
22.png
遍历嵌套对象
问题：编写函数获得对象中的值
666，必须使用到str = 'a.b.c';
方法一
let obj = { a:{ b:{ c:666 } }} var str = 'a.b.c';const getData = ()=>{ var newArr = str.split('.').reduce((o,s)=>{ return o[s]},obj) return newArr}console.log( getData());方法二
let obj = { a:{ b:{ c:666 } }} var str = 'a.b.c';const getData=(obj,str)=>{ str.split('.').forEach(element =>{ obj= obj[element]}) return obj;}console.log(getData(obj,str));这道题的重点就是要知道检索对象中包含的值有什么方法。
方法有两种:
在
[]后缀中包括住一个字符串表达式的方法 如：obj[a]可以使用
.表示法 如：obj.a
其中上面的解法就是采用[]的方法来解决这道题的。
总结
通过这次面试我了解了自己的不足，也从面试官的谈话中得到了许多好的建议。继续加油吧！冲冲冲！
如果遍历嵌套对象更好的方法，可以在评论区下留言哦！大家一起互相学习一番！
最后给大家一个对于项目的建议：最好有一个自己的 idea 做出来的项目，因为面试官更喜欢从项目里来了解你。
本人大三，正在学习前端知识！
关于本文
作者：Lovi
地址：https://juejin.cn/post/6951592511928270885
最后
欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！
》》面试官也在看的前端面试资料《《
“在看和转发” 就是最大的支持