关于flex布局中子元素宽度失效的问题

在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。

父元素设置完 display:flex 属性后；
子元素设置固定宽度：

width:50px;
height:50px;

这里加上另外一个属性可防止宽度变化，就是flex-grow;此属性为是否自动增长空间，flex-shrink;此属性为是否自动缩小空间，默认值都是1，即自动增长/缩小，设置为0时，不会自动增长/缩小，这样就可以啦！

flex-grow:0;
flex-shrink:0;

防止固定大小的元素宽度发生变化！