实现效果：
实现过程： 三个盒子，大盒子（app）装了左盒子（menu）和右盒子（main）, 大盒子采用弹性flex布局
可以把整个过程当作整个大盒子的平移
假设菜单的宽度为220px
菜单折叠时，大盒子left变为-220px
我们注意到折叠后，右侧的盒子占满了屏幕，这意味着右侧盒子的宽度应该与大盒子的宽度一样。即右侧盒子一开始便超出了大盒子的范围，这怎么做到的呢?
由于采用flex布局，里面的默认是flex: 0 1 0%，flex-shrink默认为1，一开始
width（menu）+ width（main） = width（app），
此时我们需要把menu和width的flex属性进行修改，将flex-shrink设置为0，则main盒子不会因为超出父盒子大小而收缩，这时我们可以通过检查看出 width(main) == width(app), width(menu) = 220px, 这样就可以进行大盒子的整体平移了。
有了这个基础，我们再按钮上设置个点击函数，控制大盒子app的left属性，再加个transition动画就可以达成目标了！
