display:block(或jq的show方法)与display:flex的冲突问题

最新推荐文章于 2025-06-04 19:50:46 发布
最新推荐文章于 2025-06-04 19:50:46 发布
阅读量1.1w 收藏 2
点赞数 7
CC 4.0 BY-SA版权
分类专栏： css 文章标签： css js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_37732939/article/details/84025061
本文探讨了在使用display:flex布局时遇到的问题，即在JS中使用show和hide方法导致flex布局失效的情况。深入解析原因，并提供了解决方案：使用$('#div').css('display','flex')代替show()方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本人在写页面的时候用了display:flex的布局，但是在js里用到show和hide方法时，display:flex布局就失效了。

原因是show()是通过把display属性从none改为block的过程，所以有了display:block, flex自然就失效了。

因为display:flex其实已经block化了，我的解决方法是用$('#div').css('display','flex'); 替换$('#div').show()，css里的flex也可以删除了。hide()还是正常使用不影响。

jq实现：点击图片时弹出详情弹窗，判断拖动图片时不弹出
weixin_48596030的博客
09-26 331
jq实现：点击图片时弹出详情弹窗，判断拖动图片时不弹出
基于jq的简单留言板
fengya1112的博客
07-19 568
HTML代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Template • TodoMVC</title> <link rel="s
jquery控制display属性为none或block
12-10
代码如下: //隐藏 $(“#id”).css(‘display’,’none’); //显示 $(“#id”).css(‘display’,’block’); 或 $(“#id”)[0].style.display = ‘none’; $(“#id”)返回的是JQuery 它是个集合肯定有display属性 $(“#id”).show()表示display:block, $(“#id”).hide()表示display:none; $(“#id”).toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
弹性盒flex与block冲突问题的解决
weixin_43908083的博客
12-02 4719
1.冲突的产生： 比如有个dispaly:flex;的弹性盒，要求它能够隐藏和显示。正常我们都是display:none;隐藏，display:block;显示出来，对于正常的元素来说，这没有什么问题，但对于弹性盒来说也可以使用block显示出来，但同时也会破坏flex的机制，即显示出来后不在具有弹性盒的功能。 2.解决办法： 其实也很简单，就是使用none隐藏元素后，直接使用flex代替bloc...
CSS——display属性
irotoru的博客
06-04 238
不换行，但可设置宽高，类似文本中的 “块”。独占一行，宽度默认占满父容器，可设置宽高。不换行，宽度由内容决定，无法设置宽高。display属性值(用于元素性质的转换)用于水平排列元素（如按钮组、图片列表）。整个盒子隐藏(并释放文档流位置)
javascript中的style.display=block中的block要如何理解?
weixin_34343308的博客
02-26 2568
展开 block : CSS1 块对象的默认值。用该值为对象之后添加新行 none : CSS1 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间    block 块级元素，默认情况下（不浮动不绝对定位），该元素后的内容会自动换行。相当于它的后面加了一个&lt;br&gt;。 注意: 在火狐浏览器 可能有问题 ...
display中flex与block冲突解决以及收起展开功能
qq_45234274的博客
12-14 2729
最近在做一个小模块，其中页面上有一个收起的功能记录一下 环境：react 框架：antdui 效果图： 代码： 点击onclick 主要的思想就是，先在state中存储，然后在点击事件中使用setstate改变字和状态，其中原本显示用的是block但是，display：block会改变flex布局的效果，所以这里可以直接用flex代替block,flex有默认的显示效果 okk啦，拜拜 ...
display: block和display: flex一块用出现的问题
随缘记录
02-18 2192
但是当我们使用的布局为flex布局，你就会发现设置display: block后，确实显示出来了，但是你的flex布局也失效了，原因就是display属性同时只会生效一个，解决方法：使用none隐藏元素后，使用display: flex让它显示，flex元素默认就是block元素。最常用的方法就是display: none;隐藏，然后再display: block显示。
研究jQuery的show()的display属性
weixin_34296641的博客
06-04 1221
2019独角兽企业重金招聘Python工程师标准>>> ...
用原生JS+JQ写的picker选择器
u011053926的博客
04-19 552
picker选择器
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
qq_3200628753的博客
08-07 2722
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
用JS来控制DIV样式的display属性
01-08
用JS来控制DIV样式的display属性 这上我以前做一个留言本的 一个弹出登陆模块 我根据你的需求稍做改变，你可以自己改一下就可以用
display: inline-block 和 flex冲突解决办法
qq_33256701的博客
12-20 5523
在做H5的横向滑动时需要设置子元素为行内元素，同时又需要用flex 来做垂直居中显示，发现display有个inline-flex属性 .x-scroll { overflow: scroll; white-space: nowrap; .item { display: inline-flex;//将inline-block改为这个 } &::-webkit-scrollbar { display: none; } } ...
display:flex和display：block的区别
qq_15571919的博客
05-04 1888
Document <ul class="left"> <li> <a href="">学校</a></li> <li> <a href="">教工</a></li> <li> <a href="">校友</a></li> &...
jQuery如何判断一个dom元素的display属性是不是block
ggq53219的博客
06-13 296
以下是一个简单的示例，展示了如何使用jQuery来判断一个DOM元素的。方法来获取一个DOM元素的CSS属性，包括。然后，你可以检查这个属性的值是否等于。是一个jQuery选择器，它选择了ID为。然后，我们使用一个简单的。在jQuery中，你可以使用。语句来检查这个值是否等于。
display隐藏之后flex布局失效的解决方法
weixin_64208498的博客
04-15 1071
用平时的思想就是索引号小于2的话需要出现则会采用显示’block‘，但是display隐藏会使得flex布局失效（我不知道可不可把他理解为是因为flex布局层次低于diasplay隐藏，所以被盖住了）之前自己做的那个购物页面点击变化，就出现了隐藏头部栏返回之后flex布局失效问题，其实解决方法很简单，就是让需要出现头部栏的页面。获取的元素.style.display = 'flex'返回的是“flex”
JavaScript中闭包和display:inline-block的知识点记录
静水流深
03-08 525
闭包 闭包是由函数以及创建的函数的词法环境组合而成，这个环境包含了闭包创建时所能访问的所有的局部变量。 实例： /** * 闭包的实例 * @param x * @returns {function(*): *} */ function makeAdder(x) { return function (y) { ...
CSS基础笔记八，display属性详解（变成弹性盒子flex，隐藏none，变成块级元素bolck，变成行内元素inline，变成行内块级元素inlen-bolck）
qq_55006020的博客
06-28 3817
前瞻：display属性可以设置弹性盒子 flex可以设置元素隐藏 none可以更改元素的属性变成块级 bolck变成行内 inline变成行内块级元素 inlen-bolck补充 让一个元素隐藏的几种方式1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置2，bisbility：hidden 隐藏自己，保留原来位置3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置。
使用jQuery实现指定元素内（flex布局）进行滚动并返回顶部功能
smart_dream
10-30 979
&lt;!DOCTYPE html&gt; &lt;html ng-app="app"&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title ng-bind="title"&gt;使用jQuery实现指定元素内（flex布局）进行滚动并返回顶部功能&lt;/title&gt; &
display: flex; 与display: block; 区别
最新发布
07-11
`display: flex` 和 `display: block` 是 CSS 中两种完全不同的布局模式，它们在元素排列、尺寸计算和子元素控制上有本质区别。以下是详细对比和示例说明： --- ### **1. 布局模型差异** | 特性 | `display: block...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值