草庐IT

enable-flex

全部标签

解决flex gap兼容性问题

前言一个项目写下来,在网页端预览的时候正常,结果到产品经理手上。设计稿样式实际产品手机上样式产品:“你这玩意儿怎么没间距?”我:“为什么我的正常???呐呐呐你看我手机(来自RedmeK50Utral)”产品:“哦,你看我的手机(来自荣耀20)”我:“。。。”至此我看了看我代码中的一堆gap,再看了看她那还不退休的老安卓,陷入了沉思!解决办法我的想法就是通过子元素设置右边和下边的间距,父元素设置同等值的,同方向的负magin值来实现gap同样的效果。//xxxx.scss.xxxxActions{display:flex;margin-right:-12px;margin-bottom:-12p

9-web前端 flex弹性布局

1、flex弹性布局设置方式:给父元素设置display:flex,子元素可以自动挤压或拉伸 组成部分:   弹性容器   弹性盒子   主轴:默认在水平方向   侧轴/交叉轴:默认在垂直方向 例如: 2、主轴对齐方式 属性名:justify-content  属性值效果flex-start默认值,弹性盒子从起点开始依次排列flex-end弹性盒子从终点开始依次排列center弹性盒子沿主轴居中排列space-between弹性盒子沿主轴均匀排列,空白间距分在弹性盒子之间space-around弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧space-evenly弹性盒子沿主轴均匀排列,弹

redis.service - redis-server Loaded: loaded (/etc/systemd/system/redis.service; enabled; vendor p

对有关redis的配置和安装,卸载,看redis的相关配置当启动redis的时候出现以下信息[root@wgf/]#systemctlstatusredis●redis.service-redis-serverLoaded:loaded(/etc/systemd/system/redis.service;enabled;vendorpreset:disabled)Active:failed(Result:exit-code)since日2023-05-0712:08:56CST;3sagoProcess:7746ExecStart=/usr/local/bin/redis-server/usr

(error) DENIED Redis is running in protected mode because protected mode is enabled and no password

1、报错信息(error)DENIEDRedisisrunninginprotectedmodebecauseprotectedmodeisenabledandnopasswordissetforthedefaultuser.Inthismodeconnectionsareonlyacceptedfromtheloopbackinterface.IfyouwanttoconnectfromexternalcomputerstoRedisyoumayadoptoneofthefollowingsolutions:1)Justdisableprotectedmodesendingthecomman

出现ZooKeeper JMX enabled by default这种错误的解决方法

系列文章专栏学习以来遇到的bug/问题专栏文章目录系列文章专栏前言一问题描述二解决方法2.1可能的原因分析2.2小编的问题解决方法First:检查/etc/profile里面zookeeper的环境变量配置Second:检查zookeeper/conf/zoo.cfg里面的dataDir的路径总结前言本文主要介绍出现ZooKeeperJMXenabledbydefaultUsingconfig:/opt/software/zookeeper/bin/../conf/zoo.cfgErrorcontactingservice.Itisprobablynotrunning.这种问题的解决方法。一问

IDEA弹出`Lombok requires enabled annotation processing`错误信息

问题背景项目启动时,弹出一个报错窗口问题原因当您使用Lombok库时,您可能会遇到Lombokrequiresenabledannotationprocessing的错误消息。这是因为Lombok库使用了Java注解处理器(annotationprocessor),而在默认情况下,Java编译器不会启用注解处理器。为了解决这个问题,您需要在您的项目中启用注解处理器。在IntelliJIDEA中,您可以按照以下步骤启用注解处理器:打开项目结构(ProjectStructure)对话框,可以通过菜单栏中的File>ProjectStructureFile>ProjectStructureFile>

vue报错:We‘re sorry but doesn‘t work properly without JavaScript enabled. Please enable it to continue

vue报错:We‘resorrybutdoesn‘tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue这个错误感觉是个万能的错误,各种原因都会报这个错误,只能一件一件排查,总结一下出现这种错误的情况:路由模式是history需要后端修改映射关系的,如果配置错误会出现报错;解决方式:前端修改路由模式或者后端配置映射,后端也可以配置伪静态;publicpath路径问题,打包后项目需要根据在服务器存放位置设置路径位置;本地开发情况下报错需要检查代理服务器以及发送请求地址是否正确;html中ID名与vue挂载名不一致也会出现这种情

前端知识——css之flex布局

1.基本概念flex布局是一种布局模型,经常被称之为flexbox,使用flex布局之后,他会给子元素提供强大空间分配和对齐能力。         在没有使用flex布局之前,常用布局有:流式布局,浮动布局,定位布局等等。缺陷是子元素需要自己控制自己在父元素中的位置,还要注意父元素高度坍塌。         flex的优点就是避免不灵活的布局形式,创建更多种布局模式供你选择,解决了子元素的对齐和分布与响应式等问题。缺点是只能依靠自身的布局模式,稍有变化则无法改变。 2.flex的指定 (1)display属性         给任意元素声明display:flex或者声明display:inl

css:九宫格布局的五种方法(grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性)

要实现的九宫格效果图如下:公共样式:div{width:300px;height:300px;}ul{padding:0;width:100%;height:100%;}li{list-style:none;text-align:center;line-height:100px;margin:3px;background-color:#243F49;color:white;border:1pxsolidwhite;font-weight:bolder;}div>ul>li>1/li>li>2/li>li>3/li>li>4/li>li>5/li>li>6/li>li>7/li>li>8/li>

关于 flex 布局时,子元素宽度超出父元素问题及解决方案(问题)

文章目录1.第一次遇到这个问题的场景2.第二种情况3.问题原因4.解决方案4.1方案一4.2方案二1.第一次遇到这个问题的场景先看效果图,大家可以看一下下面的样式,很明显左边和右边的盒子我是给的定宽,但是被挤压了这个是我在项目中遇到的一个bug,使用的flex布局,由于我动态的修改绿色盒子的显示与隐藏,导致两边盒子的挤压style>.container{width:1400px;display:flex;height:100vh;}.box1{background-color:red;width:300px;}.box2{background-color:yellow;flex:1;}.box