今天在项目中写一个样式时遇到了这个问题。问题描述如下：
开启switch 按钮则显示下面的选项，反之关闭。很简单的需求，实施过程中，我给下面一项的样式，使用了flex 布局，因为我想让他水平垂直居中。
刚开始，我是这样写的：
由于要隐藏控制的这个item 要与上面的item 共用一个样式，
所以我没有直接隐藏该item,而是选择在 switch 按钮状态改变的时候，
给这个wrapper增加了hide的样式，也就是 display:none;
此时问题出现了，页面并没有按照我预想的显示，按钮控制不了下面item 的现实和隐藏了。
也就是说 display:none 无效了。后来网上查了一番才明白，
原来，原因出在我给这个要隐藏的item 设置 display：flex 有关系，
因为，display：flex 就意味着 display：block ,flex 布局的元素，默认就是块级元素。
明白了原因就好该了。
我改成：先去除对该item 的display flex 设置，
抽离成一个单独的class,然后在页面上切换按钮状态为选中状态时，
给该item 加上这个 class 即可～
