问题描述：
从图中我们可以看出，圆形头像因为flex布局被挤压变窄了，宽度与高度不再相等
解决方法：
原因：之所以会被挤压就是因为当前flex布局内，宽度之和大于容器宽度了，默认收缩。
所以可以通过添加属性flex-shrink：0进行指定元素不能进行收缩
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
注意： 如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
我们可以看到添加完这个属性，头像就不会被挤压啦！！
