前端打包发布到线上后display:flex失效的问题

最新推荐文章于 2024-12-02 13:33:38 发布

小王讨厌洋葱

最新推荐文章于 2024-12-02 13:33:38 发布

阅读量620

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/wsdnnnnnnnnn/article/details/140475936

今天遇到一个问题就是display:flex失效了，在自己本地以及在别人本地都是正常的，打包到线上之后就失效了，f12调试发现，display属性没了

出现这个问题的原因是代码经过打包之后元素的优先级变低或者被覆盖掉

可以通过增加 !important 解决

也可以通过增加类名的方式，通过多个类名，精准定位到该元素

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小王讨厌洋葱

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

最近美团前端面试题目整理

loveX001的博客

10-26

1019

输出结果如下： promise.then 是微任务，它会在所有的宏任务执行完之后才会执行，同时需要promise内部的状态发生变化，因为这里内部没有发生变化，一直处于pending状态，所以不输出3。Nginx 是一款轻量级的 Web 服务器，也可以用于反向代理、负载平衡和 HTTP 缓存等。Nginx 使用异步事件驱动的方法来处理请求，是一款面向性能设计的 HTTP 服务器。传统的 Web 服务器如 Apache 是 process-based 模型的，而 Nginx 是基于event-driven模型的

前端知识宝典

qq_37759901的博客

01-29

1690

搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）

参与评论您还未登录，请先登录后发表或查看评论

当移动端H5中的display:flex不生效时，给我整破防了

weixin_47389477的博客

08-23

739

css display:flex 弹性布局子标签设置宽度无效的问题

weixin_41897680的博客

05-02

7073

css display:flex 弹性布局子标签设置宽度无效的问题

display隐藏之后flex布局失效的解决方法

weixin_64208498的博客

04-15

1070

用平时的思想就是索引号小于2的话需要出现则会采用显示’block‘，但是display隐藏会使得flex布局失效（我不知道可不可把他理解为是因为flex布局层次低于diasplay隐藏，所以被盖住了）之前自己做的那个购物页面点击变化，就出现了隐藏头部栏返回之后flex布局失效问题，其实解决方法很简单，就是让需要出现头部栏的页面。获取的元素.style.display = 'flex'返回的是“flex”

微信小程序scroll-view组件设置display:flex不生效解决办法

to_prototy的博客

08-29

2005

微信小程序scroll-view组件设置display:flex不生效解决办法

小程序display: flex失效

weixin_49218184的博客

04-12

2284

如果类名为container，将无法横向只需修改类名，就可以使用display: flex 源代码：  <view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view> /* pages/list/list.wxss */ .containe

前端面试题

1234Wu--前端Blog

02-16

4390

目录一、JS部分：1.原型链2.闭包3.手写Promise4.数据类型判断5.Map和Set6.垃圾回收机制7.安全随机数8.贪心算法9.js循环10.数组新方法二、HTML部分三、Css部分1.垂直居中2.弹性布局3.grid布局四、浏览器部分五、Vue部分1.$nextTick2.$set3.取消请求4.vue3.0新特性5.vue新指令一、JS部分： 1.原型链 2.闭包 3.手写Promise 4.数据类型判断 typeof：返回7种数据类型:number,str

最全面、最详细web前端面试题及答案总结

热门推荐

HanXiaoXi_yeal的博客

02-01

3万+

2021最全面、最详细web前端面试题及答案总结总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

React,Vue,Css3 ...等热门面试题

qq_70010470的博客

05-24

867

## 面试 * Fiber React Fiber是react执行渲染时的一种新的调度策略 JavaScript是单线程的一旦组件开始更新主线程就一直被React控制这个时候如果再次执行交互操作就会卡顿页面首次渲染会创建一颗结构一模一样的的Fiber节点树 Fiber在update的时候会从原来的Fiber clone出一个新的Fiber 俩个Fiber diff出的变化在更新结束后会取代之前的 Fiber节点树渲染过程采用切片的方式

fieldset 元素添加 display: flex不生效的问题

palmer_kai的博客

06-29

2775

问题最近写项目时候，对 fieldset 元素添加 display: flex ，但是没有达到预期中的效果。在网上， stackoverflow 上都提到了这个 bug，然后查看了官方文档解决方案在 fieldset 中添加一个 div 元素用来作为 flex box 官文 Styling with CSSSection There are several special ...

flex自适应布局不生效

qq_45327886的博客

11-30

1万+

flex自适应布局不生效

vue使用插槽slot的过程中，父级组件设置了display：flex，但是插入组件的flex：1属性不生效

weixin_43311389的博客

12-17

2879

在用vue开发组件的时候，我预期的效果是这样的但是实际开发的过程中出现了子组件始终不能均匀分布的问题，flex：1属性根本没生效，如下效果：于是仔细检查每一处： App.vue TabBar组件 TabBarItem组件发现了问题：在TabBarItem组件的template中多嵌套了一层div，这是模板自动生成的我没有删除，导致实际的html机构是这样的：这样的flex是肯...

css 布局display为flex,float失效

細水、長流√的专栏

09-07

1071

当父元素的display属性为flex时，以下几种属性会失效。3.text-align(文本排列)会失效。时，子元素float直接失效。1.float(浮动)会失效。2.clear(清除)会失效。父元素display 为。

Css ︱flex: 1 & display:flex 导致的宽度失效问题

最新发布

Ethan's Blog

12-02

2277

flex: 1 & display:flex 导致的宽度失效问题，通过给子元素设置 min-wdith: 0 即可解决

解决【display：flex布局】遇上【position: absolute / fixed 】的失效问题

欢迎来到我的频道~

08-11

2万+

问题描述：有个这样的页面，页面是通过flex布局的，现在想将头部( 我的订单栏 )固定，那么我们第一反应就是添加定位呀，position : fixed。但是问题来了，position可以添加，但是添加之后，页面变成这样了（如下所示），也就是设置的display:flex 失效了，不起作用。 position 一般常用的属性值有三种： relative 、 absolut...

微信开发者工具flex布局不生效问题解决

weixin_50939386的博客

06-03

2080

关于微信开发者工具flex布局不生效问题解决

设置display:flex之后width失效

haohaoxueqd的博客

12-01

948

设置display:flex之后width失效

unipp的display:flex失效

08-13

当父元素设置了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生效。123 #### 引用[.reference_title] - *1* *3* [【display:none失效】当display:none遇到了display:flex](https://blog.youkuaiyun.com/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.youkuaiyun.com/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 ]