存在display: flex的情况下如何使用display: none和display: block
时间: 2023-07-09 14:54:50 浏览: 50
如果一个元素设置了 `display: flex`,那么这个元素的子元素也会受到 flex 布局的影响。因此,如果想要隐藏一个子元素,可以使用 `display: none`。这会将元素从页面中完全移除,包括在 flex 容器中的位置。如果想要显示这个子元素,可以使用 `display: block` 或者 `display: inline-block`,这样子元素就会重新出现在 flex 容器中,并且按照 flex 布局排列。需要注意的是,如果子元素设置了 `display: none`,那么它的 flex 属性也将失效。
相关问题
unipp的display:flex失效
当父元素设置了display:flex时,子元素中的display:none或display:block会失效。这是因为display:flex的优先级高于display:none和display:block,使它们的作用失效。如果你希望在使用flex布局时,子元素同时具有display:flex和display:block的效果,可以使用其他方法。一种解决方法是先使用display:none隐藏元素,然后再使用display:flex显示元素。这样,子元素默认就是block元素,可以在flex布局中正常显示。你可以将display:block替换为display:flex来实现这一效果。例如,将原来的`display:block`修改为`display:flex`。这样,即可使unipp的display:flex生效。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [【display:none失效】当display:none遇到了display:flex](https://blog.csdn.net/m0_61892085/article/details/123955786)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [display: block和display: flex一块用出现的问题](https://blog.csdn.net/qq_42890921/article/details/129099809)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
怎么取消display:flex
取消display:flex的方式是将其值设置为其他的display属性,比如display:block或者display:inline。通过这样的设置,可以取消使用display:flex的效果。引用父元素设置了display:flex时,子元素中的display:none或者display:block就会失效。这是因为display:flex的优先级高于display:none和display:block,使他们的作用失效了。 引用修改后的代码如下所示:
```html
<body>
<header>
<div>
<section>123</section>
</div>
</header>
</body>
<style>
header {
display: block;
}
section {
display: none;
}
</style>
```
这样,通过将display:flex修改为display:block,就取消了原来display:flex的效果,使得子元素中的display:none生效了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [【display:none失效】当display:none遇到了display:flex](https://blog.csdn.net/m0_61892085/article/details/123955786)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [css flex 踩坑总结](https://blog.csdn.net/tangran0526/article/details/126297403)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]