【display:none失效】当display:none遇到了display:flex

本文介绍: 【display:none 失效】当di s play:none 遇到了di s play:flex

父元素设置了display:flex时，子元素中的display:none或者display:block就会失效。这是因为display:flex的优先级高于display:none和display:block，使他们的作用失效了。

解决办法如下：

在子元素的外层，原来父元素的内层套一个盒子，比如div，display:none就能作用了。

在这种情况下，section盒子是不会被隐藏的

&lt;body&gt;
    &lt;header&gt;
    	&lt;section&gt;123&lt;/section&gt;
	&lt;/header&gt;
</body>
<style>
    header{
		display:flex;
    }
    section {
		display:none;
    }
</style>

修改后：

<body>
    <header>
    	<div>
            <section>123</section>
        </div>
	</header>
</body>
<style>
    header{
		display:flex;
    }
    section {
		display:none;
    }
</style>