display: block和display: flex一块用出现的问题

    当我们需要隐藏一个元素，然后通过点击或者别的事件再让它显示出来。

最常用的方法就是display: none;隐藏，然后再display: block显示
但是当我们使用的布局为flex布局，你就会发现设置display: block后，确实显示出来了，但是你的flex布局也失效了，原因就是display属性同时只会生效一个，
解决方法：使用none隐藏元素后，使用display: flex让它显示，flex元素默认就是block元素

//把display: block换成display: flex;
//display: block
display: flex;