首页怎么取消display：flex

怎么取消display：flex

时间: 2023-08-27 22:14:28 浏览: 380

详解CSS中的display:flex||inline-flex属性

主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-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 ]

阅读全文