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

最新推荐文章于 2024-06-13 21:16:59 发布
原创 最新推荐文章于 2024-06-13 21:16:59 发布 · 1.1w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #js #前端

本文探讨了在使用display:flex布局时遇到的问题，即在JS中使用show和hide方法导致flex布局失效的情况。深入解析原因，并提供了解决方案：使用$('#div').css('display','flex')代替show()方法。

本人在写页面的时候用了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 364
jq实现：点击图片时弹出详情弹窗，判断拖动图片时不弹出
基于jq的简单留言板
fengya1112的博客
07-19 596
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
CSS diaplay=“grid“未生效与display:block
Nie2014的博客
07-12 1874
1、CSS grid可以通过嵌套生成更灵活的页面布局。 参考博客值得收藏的css grid构建复杂布局的小技巧！中代码示例 <p class="container"> <p class="item">One</p> <p class="item">Two</p> <p class="item">Three</p> <p class="item inner-grid"> <p clas
记录一下我使用display和grid时犯下的错误【2021.12.4】
masierty的博客
12-05 880
我想要用grid-row:2/3;来固定住第二排的内容，让第一排的网格区域得到保留，点击第二排区域里面的按钮控制第一排区域的内容的出现和消失（display）。 我这个逻辑是没问题的，但是如果第一排内容全都被display：none，rid-row:2/3是不起作用的。 第一排只要有一个网格还有内容，都是可以用这个方法来操作的。 我简易还原了一下： <!DOCTYPE html> <html lang="en"> <head> <meta ...
flex布局
woaizhuzhuxia521521的博客
10-26 267
1 display:flex;  使用flex布局 2 flex-direction:  row  |  row-reverse  |  column  |  column-reverse ;        元素排列方向  :  从左向右（默认）|  从右向左  |  从上往下  |  从下往上  ； 3 flex-wrap :  nowrap  |  wrap  |  wrap-rever...
弹性盒flex与block冲突问题的解决
weixin_43908083的博客
12-02 4770
1.冲突的产生： 比如有个dispaly:flex;的弹性盒，要求它能够隐藏和显示。正常我们都是display:none;隐藏，display:block;显示出来，对于正常的元素来说，这没有什么问题，但对于弹性盒来说也可以使用block显示出来，但同时也会破坏flex的机制，即显示出来后不在具有弹性盒的功能。 2.解决办法： 其实也很简单，就是使用none隐藏元素后，直接使用flex代替bloc...
javascript中的style.display=block中的block要如何理解?
weixin_34343308的博客
02-26 2611
展开 block : CSS1 块对象的默认值。用该值为对象之后添加新行 none : CSS1 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间    block 块级元素，默认情况下（不浮动不绝对定位），该元素后的内容会自动换行。相当于它的后面加了一个&lt;br&gt;。 注意: 在火狐浏览器 可能有问题 ...
研究jQuery的show()的display属性
weixin_34296641的博客
06-04 1237
2019独角兽企业重金招聘Python工程师标准>>> ...
用原生JS+JQ写的picker选择器
u011053926的博客
04-19 622
picker选择器
jq文件上传带进度条
最新发布
08-09
display: inline-block; margin-top: 15px; } .btn:hover { background-color: #2980b9; } .btn:disabled { background-color: #bdc3c7; cursor: not-allowed; } .file-list { margin-top: 25px; ...
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()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
用JS来控制DIV样式的display属性
01-08
用JS来控制DIV样式的display属性 这上我以前做一个留言本的 一个弹出登陆模块 我根据你的需求稍做改变，你可以自己改一下就可以用
display中flex与block冲突解决以及收起展开功能
qq_45234274的博客
12-14 2761
最近在做一个小模块，其中页面上有一个收起的功能记录一下 环境：react 框架：antdui 效果图： 代码： 点击onclick 主要的思想就是，先在state中存储，然后在点击事件中使用setstate改变字和状态，其中原本显示用的是block但是，display：block会改变flex布局的效果，所以这里可以直接用flex代替block,flex有默认的显示效果 okk啦，拜拜 ...
display: block和display: flex一块用出现的问题
随缘记录
02-18 2273
但是当我们使用的布局为flex布局，你就会发现设置display: block后，确实显示出来了，但是你的flex布局也失效了，原因就是display属性同时只会生效一个，解决方法：使用none隐藏元素后，使用display: flex让它显示，flex元素默认就是block元素。最常用的方法就是display: none;隐藏，然后再display: block显示。
display: inline-block 和 flex冲突解决办法
qq_33256701的博客
12-20 5579
在做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 1927
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 315
以下是一个简单的示例，展示了如何使用jQuery来判断一个DOM元素的。方法来获取一个DOM元素的CSS属性，包括。然后，你可以检查这个属性的值是否等于。是一个jQuery选择器，它选择了ID为。然后，我们使用一个简单的。在jQuery中，你可以使用。语句来检查这个值是否等于。
display隐藏之后flex布局失效的解决方法
weixin_64208498的博客
04-15 1110
用平时的思想就是索引号小于2的话需要出现则会采用显示’block‘，但是display隐藏会使得flex布局失效（我不知道可不可把他理解为是因为flex布局层次低于diasplay隐藏，所以被盖住了）之前自己做的那个购物页面点击变化，就出现了隐藏头部栏返回之后flex布局失效问题，其实解决方法很简单，就是让需要出现头部栏的页面。获取的元素.style.display = 'flex'返回的是“flex”
JavaScript中闭包和display:inline-block的知识点记录
静水流深
03-08 538
闭包 闭包是由函数以及创建的函数的词法环境组合而成，这个环境包含了闭包创建时所能访问的所有的局部变量。 实例： /** * 闭包的实例 * @param x * @returns {function(*): *} */ function makeAdder(x) { return function (y) { ...
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、付费专栏及课程。

余额充值