关于vue-cli中-webkit-flex-direction: column失效问题

最新推荐文章于 2022-09-06 16:52:15 发布
最新推荐文章于 2022-09-06 16:52:15 发布
阅读量474 收藏
点赞数
分类专栏： 前端
原文链接：https://www.mk2048.com/blog/blog.php?id=hja1ai2kb0cb&title=%E5%85%B3%E4%BA%8Evue-cli%E4%B8%AD-webkit-flex-direction%3A+column%E5%A4%B1%E6%95%88%E9%97%AE%E9%A2%98
版权

我最近在用vue-cli更新项目，在我引入layer.css后会报错并且使用弹性盒时查看元素的时候没有-webkit-flex-direction: column这个属性会失效

1179274-20180604092726939-102642664.png

这个本身就不打算给display: box的兼容的方案

提示的意思是建议使用flex代替box

我们可以从图中得到的信息为layer.css 

所以我们可以在layer.css的文件中找到display: box 改为display: flex

会做饭的技术男
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flex scroll 无效 与flex:1 无效问题以及flex:1底部图片显示不完全
weixin_44076777的博客
09-10 2276
flex scroll 无效 与flex:1 无效问题以及flex:1底部图片显示不完全
node-v12.20.1-sunos-x64.tar.xz
最新发布
04-27
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
关于flex布局在IE浏览器上的坑
热门推荐
heyNewbie的博客
09-24 3万+
最近在项目中，钟情于flex布局来搭架子，感觉确实是挺方便的，但是今天遇到一个挺玄幻的问题，flex-direction 属性在IE中执行力并不好， 代码就不贴出来了，毕竟是公司财产， 情景：并排的表格，在浏览器尺寸改变时，变更排列方式，结果在方法执行的时候，元素表格消失了，是的，消失了！！！ 找到最后，发现是flex-direction: colum这个属性不能够执行， 经过百度，发现是...
HTMLCSS学习笔记（十八）——渐变
qq_45268602的博客
08-16 193
浏览器内核及私有前缀 在学习渐变前，我们应该了解什么是浏览器内核及私有前缀。 浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。 内核 私有前缀 说明 Trident -ms- IE浏览器专属的CSS属性需添加-ms-前缀 Gecko -moz- 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀 Webkit -Webkit- 所有基于Webkit引擎的浏览器（如Chrome、Safari）专
flex布局子元素高度设置无效的解决办法
ycg5250的博客
05-26 1万+
父元素代码css代码 关键代码是flex-shrink: 0; 当指定view为flex布局后，给子元素定义width和height是不起效果的。原因：定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。 所以，倘若给父元素设置了flex布局后，若要其子元素的width和
flex-direction: column无效的情况
qugengting的博客
11-06 1万+
CSS3 设置如下： display: flex; flex-direction: column 意思是盒布局，并且该布局内部的子控件排列方式是纵向排列，即从上往下，但有一种情况属于例外，就是子控件的定位是这样的： position: absolute; 如果A子控件设置了以上属性，那么A不参与排列，BCD依次从顶上排列下来。...
用了flex-direction:column;没法对齐
mus-z的博客
02-25 2638
参考：https://www.cnblogs.com/wangshengli520/p/7615501.html .list1 { width: 27%; padding-top: 0.5rem; list-style: none; overflow: hidden; display: flex; flex-direction: column; ...
微信小程序固定底部样式问题（flex-direction不起作用）
qq_36923648的博客
07-10 2341
flex-direction不起作用时，记得给父元素添加display:flex 先贴代码和截图 css: .footfixed { display:block; position:fixed; bottom:0; left:0; background:#fff; z-index:50; width:100%; font-size:28rpx; line-height:100rpx; color: snow } .foot-left{ display: flex; width: 50%; hei
解决flex布局下无法滚动的问题
IU
08-12 3906
flex布局的flex-shrink使用详解
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果已经有了配置（确保配置PurgeCSS），则很有用。 最小（默认） -将创建一个最小...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
在你的 vue-cli 创建的项目中安装插件，如果没有请参考 vue add multiple-page 命令 以下是此插件的 3 个命令： init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个...
vue-cli系列之vue-cli-service整体架构浅析
12-07
vue启动一个项目的时候，需要执行npm run serve，其中这个serve的内容就是vue-cli-service serve。可见，项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东（主要...
vue-cli中安装方法(图文详细步骤)
01-21
vue-cli 是vue.js的脚手架，用于快速自动生成vue.js+webpack的项目模板，这样大大降低了webpack的使用难度。下面是详细的安装步骤 vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
React antd的表格table设置column宽度失效，横向滚动设置 为scroll={{ x: 100 }}无效
u010234868的专栏
09-06 3581
即可解决React antd的表格table设置column宽度失效，横向滚动设置 为scroll={{ x: 100 }}无效的问题。2. 横向滚动设置为scroll={{ x: 'max-content' }}table每列内容不换行显示，超出显示宽度则出现横向滚动条。
解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
11-14 4260
在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。 使用display: flex;的时候需要加上display: -webkit-box; 使用flex: 1;的时候要加上: -webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1; 使用alig
vue运行,打包项目后css中使用的-webkit-line-clamp: 2这个属性不生效
weixin_40716786的博客
01-16 3037
在项目中要实现多行省略，会使用-webkit-line-clamp这个属性，-webkit-line-clamp: 2;代码如下 p{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflo...
flex布局+v-for循环，布局属性无效问题
WX_nbclass的博客
09-27 1810
问题：flex布局+v-for循环，flex容器属性无效。（包括flex-direction、flex-warp、justify-content、align-items等各种属性） 原因：将flex布局与v-for循环写到一个元素内，导致容器属性作用于循环内部子元素。
关于 flex-direction: column 之后宽度自动变为100%的解决办法
dongcehao的博客
03-22 1万+
关于 flex-direction: column 之后宽度自动变为100%的解决办法 前提介绍：要实现这么个东西，想到了使用 flex html: <divclass="left cardp"slot="left"> <divclass="label":style="{color:'#cd329a','border-color':'#cd329a'}">
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
09-07
vue-cli是一个构建Vue.js工程的脚手架工具，帮助开发者快速搭建和管理Vue.js项目。而vue-cli 2.9.6版本是其一个较早的版本，可以使用它来初始化一个基于webpack的Vue.js工程。 使用vue-cli 2.9.6版本初始化webpack工程，首先需要确保本地已安装了node.js和npm。 在命令行中执行以下命令来安装vue-cli： ``` npm install -g vue-cli@2.9.6 ``` 安装完成后，可以使用以下命令来初始化一个webpack工程： ``` vue init webpack my-project ``` 这里的"my-project"是你自定义的项目名称，可以替换为其他名称。 执行上述命令后，vue-cli会根据webpack模板生成项目的基本结构和文件。 接着，需要进入项目文件夹： ``` cd my-project ``` 然后执行以下命令来安装项目所需的依赖： ``` npm install ``` 安装完成后，可以使用以下命令来启动项目： ``` npm run dev ``` 这样，webpack工程就成功初始化并启动了。通过访问http://localhost:8080，可以在浏览器中查看项目的运行效果。 在初始化的工程中，可以编辑和修改src目录下的文件，这里的主要文件包括App.vue和main.js，分别是Vue组件和入口文件。 总之，使用vue-cli 2.9.6版本初始化webpack工程能够为开发者提供一个基于webpack的Vue.js开发环境，使他们能够更高效地进行Vue.js项目的开发和管理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值