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

最新推荐文章于 2024-07-16 20:59:20 发布
最新推荐文章于 2024-07-16 20:59:20 发布
阅读量1.1w 收藏 2
点赞数 7
分类专栏： css 文章标签： css js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37732939/article/details/84025061
版权

本人在写页面的时候用了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()还是正常使用不影响。

Iris122_
关注
  • 7
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
研究jQuery的show()的display属性
weixin_34296641的博客
06-04 1182
2019独角兽企业重金招聘Python工程师标准>>> ...
基于jq的简单留言板
fengya1112的博客
07-19 460
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 4590
1.冲突的产生： 比如有个dispaly:flex;的弹性盒，要求它能够隐藏和显示。正常我们都是display:none;隐藏，display:block;显示出来，对于正常的元素来说，这没有什么问题，但对于弹性盒来说也可以使用block显示出来，但同时也会破坏flex的机制，即显示出来后不在具有弹性盒的功能。 2.解决办法： 其实也很简单，就是使用none隐藏元素后，直接使用flex代替bloc...
CSS（布局+flex布局）+HTML（二）
最新发布
weixin_65450681的博客
07-16 674
flex-direction属性决定主轴的方向（即项目排列方向）flex-direction: row（水平方向起点在左） | row-reverse（水平方向起点在右） | column（垂直方向起点在上） | column-reverse;（垂直方向起点在下flex-warp 换行 flex-wrap: nowrap (不换行)| wrap(换行，第一行在上方) | wrap-reverse(换行，第一行在下方);
javascript中的style.display=block中的block要如何理解?
weixin_34343308的博客
02-26 2319
展开 block : CSS1 块对象的默认值。用该值为对象之后添加新行 none : CSS1 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间    block 块级元素，默认情况下（不浮动不绝对定位），该元素后的内容会自动换行。相当于它的后面加了一个&lt;br&gt;。 注意: 在火狐浏览器 可能有问题 ...
display中flex与block冲突解决以及收起展开功能
qq_45234274的博客
12-14 2611
最近在做一个小模块，其中页面上有一个收起的功能记录一下 环境：react 框架：antdui 效果图： 代码： 点击onclick 主要的思想就是，先在state中存储，然后在点击事件中使用setstate改变字和状态，其中原本显示用的是block但是，display：block会改变flex布局的效果，所以这里可以直接用flex代替block,flex有默认的显示效果 okk啦，拜拜 ...
display: inline-block 和 flex冲突解决办法
qq_33256701的博客
12-20 5173
在做H5的横向滑动时需要设置子元素为行内元素，同时又需要用flex 来做垂直居中显示，发现display有个inline-flex属性 .x-scroll { overflow: scroll; white-space: nowrap; .item { display: inline-flex;//将inline-block改为这个 } &::-webkit-scrollbar { display: none; } } ...
复杂的 jq 拖拽、框选拖拽，ajax传值、解决删除与拖拽冲突
小雨飞的博客
08-09 325
*{margin: 0 auto;} .dragdiv{border: 2px solid black;height: 100px;width: 800px;margin-top: 20px;} span{background: red;width: 50px;height: 50px;margin: 20px;display: inline-block;} .to...
用原生JS+JQ写的picker选择器
u011053926的博客
04-19 388
picker选择器
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
qq_3200628753的博客
08-07 2472
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结......
display:flex和display：block的区别
qq_15571919的博客
05-04 1742
Document <ul class="left"> <li> <a href="">学校</a></li> <li> <a href="">教工</a></li> <li> <a href="">校友</a></li> &...
display隐藏之后flex布局失效的解决方法
weixin_64208498的博客
04-15 934
用平时的思想就是索引号小于2的话需要出现则会采用显示’block‘，但是display隐藏会使得flex布局失效（我不知道可不可把他理解为是因为flex布局层次低于diasplay隐藏，所以被盖住了）之前自己做的那个购物页面点击变化，就出现了隐藏头部栏返回之后flex布局失效问题，其实解决方法很简单，就是让需要出现头部栏的页面。获取的元素.style.display = 'flex'返回的是“flex”
JavaScript中闭包和display:inline-block的知识点记录
静水流深
03-08 477
闭包 闭包是由函数以及创建的函数的词法环境组合而成，这个环境包含了闭包创建时所能访问的所有的局部变量。 实例： /** * 闭包的实例 * @param x * @returns {function(*): *} */ function makeAdder(x) { return function (y) { ...
CSS基础笔记八，display属性详解（变成弹性盒子flex，隐藏none，变成块级元素bolck，变成行内元素inline，变成行内块级元素inlen-bolck）
qq_55006020的博客
06-28 2505
前瞻：display属性可以设置弹性盒子 flex可以设置元素隐藏 none可以更改元素的属性变成块级 bolck变成行内 inline变成行内块级元素 inlen-bolck补充 让一个元素隐藏的几种方式1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置2，bisbility：hidden 隐藏自己，保留原来位置3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置。
使用jQuery实现指定元素内（flex布局）进行滚动并返回顶部功能
smart_dream
10-30 906
&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:box;与display:flex;区别
soos的博客
07-10 931
display:box;是09年以前的弹性盒模型，display:flex;是12年新出的css属性，两者没有什么区别，仅是各阶段草案命名不同， 推荐使用display:flex;(个人意见仅供参考)
js修改display，在none和block之间切换不显示问题
热门推荐
渔火江渚上的博客
05-21 1万+
目的：这是我的目的，要实现的效果 点击回复a链接 ，输入框input所在父元素div，显示或隐藏。 input>div>div（这个最外层div，对应着问题一，和问题二无关） 问题一：display属性值修改成功不显示 一个div，初始属性值为：display:none； 通过点击某a链接，调用某js函数，修改其display值为block； 成功！但页面不显示。 *解决：其父元素设置最小高度，使其包含这个div 问题二：dislay属性值...
display: block和display: flex一块用出现的问题
随缘记录
02-18 1862
但是当我们使用的布局为flex布局，你就会发现设置display: block后，确实显示出来了，但是你的flex布局也失效了，原因就是display属性同时只会生效一个，解决方法：使用none隐藏元素后，使用display: flex让它显示，flex元素默认就是block元素。最常用的方法就是display: none;隐藏，然后再display: block显示。
display: block和display: flex 的区别
05-15
`display: block` 和 `display: flex` 是两种不同的 CSS 属性值，它们用于控制 HTML 元素的布局。 `display: block` 用于将元素渲染为块级元素，每个块级元素会独占一行，可以设置宽度、高度、内边距和外边距等属性。常见的块级元素有 `div`、`p`、`h1` ~ `h6` 等。 `display: flex` 用于将元素渲染为一个弹性容器，它可以通过 `flex-direction` 属性来控制子元素的排列方向，可以通过 `justify-content` 和 `align-items` 属性来控制子元素的水平和垂直对齐方式，还可以通过 `flex-wrap` 属性来控制子元素的换行方式。常见的弹性容器元素有 `div`。 总的来说，`display: block` 将元素渲染为块级元素，而 `display: flex` 将元素渲染为一个弹性容器，可以更灵活地控制子元素的布局。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值