flex布局宽高度设置不成功

2023-11-19

flex布局中,会出现是在宽高,但是不起作用,那是因为flex布局当不够的时候自动压缩了

可以选择 - 让其不压缩

 flex-shrink: 0;

然后在设置宽高

或者利用复合属性

flex: 0 0 83rpx;

这篇博客是对flex布局的讲解,以及新老版本的flex的区别

https://blog.csdn.net/qq_42625428/article/details/83755402

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

flex布局宽高度设置不成功 的相关文章

  • CSS之背景样式及边框样式

    1 背景样式 常用属性 background color 背景颜色 background image 背景图片 background repeat 背景图片的平铺方式 background position 背景图片的位置 backgrou
  • HTML期末学生大作业-使用HTML+CSS技术仿传智博客网站

    精彩专栏推荐 文末获取联系 作者简介 一个热爱把逻辑思维转变为代码的技术博主 作者主页 主页 获取更多优质源码 web前端期末大作业 毕设项目精品实战案例 1000套 程序员有趣的告白方式 HTML七夕情人节表白网页制作 110套 超炫酷的
  • 未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0"[已解决]

    前两天升级系统架构 升级后打开网页报错了 详细信息如下 未能加载文件或程序集 Newtonsoft Json Version 4 5 0 0 Culture neutral PublicKeyToken 30ad4fe6b2a6aeed 或
  • IDEA中格式化代码快捷键

    一键格式化代碼 Ctrl Alt L 快捷键汇总链接 Intellij IDEA 快捷键整理 TonyCody Eclipse常用快捷键汇总 注意 如果按Ctrl Shift F在win10上会出现字体的简繁转换 再重复按键一次就可以转换回
  • SQL注入种类

    SQL注入攻击的种类 知彼知己 方可取胜 首先要清楚SQL注入攻击有哪些种类 工具 原料 云盾 方法 步骤 1 1 没有正确过滤转义字符 在用户的输入没有为转义字符过滤时 就会发生这种形式的注入式攻击 它会被传递给一个SQL语句 这样就会导
  • Vue之Vant移动端组件库使用方法

    步骤 全局安装 npm i vant S 在mian js中引入 import Vant from vant import vant lib index css Vue use Vant 根据实际情况引入组件
  • 打造高大上的Canvas粒子动画

    首先来看下我们准备要做的粒子动画效果是怎么样的 是这样 或者是这样 甚至是这样 很酷炫 那如何去实现类似上面的粒子动画甚至根据自己的喜好去做更多其他轨迹的动画呢 请看下面详细的讲解 技术选择 因为粒子数量很多 而且涉及到图像像素处理 所以这
  • Html页面内引入抽取出来的Html,js,css示例

    在写纯Html网站的时候 每个页面的头部菜单 js css和底部说明都是同样的 有的时候你要改 就要一个一个的去改 通过下面方法将这些相同的抽取出来 方便后期维护 希望能帮到你 在applyBusiness html页面引入公共页头head
  • vue 循环遍历 搜寻资料

    写vue 循环遍历的 大全例子解释 转载连接 https www cnblogs com xulei1992 p 6015416 html https www jqhtml com 49765 html https blog csdn ne
  • React 中ref的几种用法

    React 中ref的几种用法 1 字符串 通过 this refs a 来引用真实dom的节点 dom 节点上使用
  • ES6语法知识点

    目录 let const 常用 暂时性死区 const 建议 箭头函数 常用 建议 iterator迭代器 解构赋值 常用 建议 剩余 扩展运算符 常用 扩展运算符 剩余运算符 在对象中使用扩展运算符 建议 对象属性 方法简写 常用 对象属
  • 基础15:npm、yarn、pnpm

    npm2 用 node 版本管理工具把 node 版本降到 4 那 npm 版本就是 2 x 了 执行 npm init npm install express 可以看到node modules目录如下 可以看到 npm2的node mod
  • 前端js和jq中select下拉框

    获取select选中的option的值 ddlRegType find option selected val 获取select选中的text ddlRegType find option selected text 获取select选中的
  • Web启动项目走Https协议(Webpack版,Umi版和Host代理版)

    需求 Web项目的启动 一般是默认的http协议 在某些业务需求时 需要走https来调试 Webpack版本 只需在webpack的devServer中配置就可以了 devServer host 0 0 0 0 port 8080 htt
  • 父容器display:flex后,子元素的内部元素height:100%无效解决方法

    父容器display flex后 子元素的内部元素height 100 无效解决方法 解救办法 父类容器position relative 子元素 position absolute width 100 height 100 效果图 代码如
  • react脚手架配置别名并自动提示[VSCode]

    1 安装三方库 craco craco yarn add craco dev npm install craco craco save dev 2 配置craco config js const path require path modu
  • 20最佳代码审查工具-专门为开发人员准备

    程序员总是面临最后期限的压力和很多延误软件设计相当不稳定 整个产品是不稳定的 这种不稳定性的设计软件的原因是 它是不能正常测试 来的工作代码审查工具 的代码审查工具可以帮助web开发人员指出他们哪些区域的程序代码是错误的也可能有机会是不正确
  • 一眼看懂promise与async await的区别

    promise方法 let p1 new Promise resolve reject gt setTimeout gt resolve 我是p1 4000 let p2 new Promise resolve reject gt setT
  • 谷歌(Chrome)浏览器自定义插件

    准备 1 js文件 需要的功能逻辑 2 插件主入口及配置 manifest json 3 插件图标 目录结构 添加插件流程 选择插件文件夹 代码 manifest json name 百度 manifest version 2 versio
  • 禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹

    发现之前阻止页面滚动的代码e preventDefault代码失效了 于是自己折腾了一番 找到了解决办法 一 前言 浏览器在移动端有一个默认触摸滚动的效果 让我们感触最深的莫过于微信浏览器里面 下拉时自带橡皮筋的效果 然而在开发的时候我们经

随机推荐

  • 常用的加密算法

    整理一下常用的加密算法 加密算法我们整体可以分为 可逆加密和不可逆加密 可逆加密又可以分为 对称加密和非对称加密 一 不可逆加密 常见的不可逆加密算法有MD5 HMAC SHA1 SHA 224 SHA 256 SHA 384 和SHA 5
  • Flask(一)

    Flask 0 Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架 对于Werkzeug本质是Socket服务端 其用于接收http请求并对请求进行预处理 然后触发Fl
  • 设计模式——导论

    作为软件开发人员 我们在平时工作的过程中 往往需要编写很多的代码来实现我们的需求 很多的时候会造成代码臃肿和代码冗余的情况 这个时候我们需要引入一个理念 设计模式 设计模式存在的意义在于 1 使得我们的代码更加精炼 2 使我们代码的可读性更
  • 面试求职经历及遇到的部分问题

    转眼间已经工作一年多了 最近想换个工作环境 就选择了跳槽 跳槽对我们程序猿来说并没什么稀奇 但这是我第一次跳槽 也颇感激动 哈哈 总的来说 这次找工作还是相对去年来说比较容易的 毕竟已经工作一年了嘛 记得去年的时候投20份简历也不一定会有面
  • 开发者本地搭建性能监测工具(Windows)

    ElasticSearch 8 9 0 开发模式安装 JDK安装 官方提供版本与JDK支持关系 https www elastic co cn support matrix matrix jvm 我们安装Elasticsearch 8 9
  • ATT&CK实战系列——红队实战(一)红日靶场1

    目录 靶场搭建 拓扑图 配置网络 外网打点web服务器 信息搜集 nmap扫端口服务 dirsearch目录扫描 phpmyadmin日志getshell yxcms 后台getshell xss 关闭win7防火墙 上线msf cs 上线
  • 基于加密流量组建跨机房(混合云)k8s集群

    业务场景 解决服务同城 异地多活灾备 环境 a机房 私网 192 168 1 0 24 公网ip 111 111 111 111 b机房 私网 192 168 2 0 24 公网ip 222 222 222 222 c机房 私网 192 1
  • 传统目标检测算法综述

    传统目标检测算法综述
  • Node.Js基础知识

    Node Js架构 Natives modules 当前层内容由JS实现 提供 应用程序可直接调用库 例如 fs path http等 JS语言无法直接操作底层硬件设置 Builtin modules 胶水层 Builtin modules
  • 基于DS18B20和HS1101的仓库自动报警系统

    基于DS18B20和HS1101的仓库自动报警系统 背景介绍 效果展示 完整版的项目代码 仿真文件 下面是项目原理图 具体管脚定义如下图 18B20温度原理 HS1101湿度传感器 红外测距报警模块我用到的是GP2D12 通过数模转化器AD
  • 解决高德地图UnsatisfiedLinkError问题

    今天遇到一个bug 高德地图3d地图java lang UnsatisfiedLinkError 问题分析 没有找到libgdamapv4sdk751 so java lang UnsatisfiedlinkError 的解释如下 Thro
  • 交换机自学习和转发帧

    交换机自学习和转发帧 主机A给主机B发送帧 首先假设已经通过arp协议得到主机B的MAC地址 当交换机1收到该帧后将源MAC地址和接口登记 然后在帧交换表中查到目的MAC地址 没有找到就进行盲目转发 泛洪 交换机2收该帧后 做相同的动作 主
  • vue中常用的数组方法

    Vue中常用的数组方法 filter map forEach find findIndex some every filter map forEach find findIndex some every filter filter 方法创建
  • OpenMMLab AI实战营第一天笔记

    计算机视觉基础与openmmlab介绍 机器学习和神经网络简介 机器学习基础 机器学习是什么 从数据中学习经验 以解决特定问题 机器学习的典型范式 监督学习 有标签 无监督学习 无标签 强化学习 让智能体自己适应环境 机器学习中的分类问题
  • 联想小新笔记本,16G运行内存只能使用13.9G或14.9G的解决方案

    1 问题描述 我的电脑是联想小新Pro 16 一共有16G的运行内存 但实际情况只能使用13 9G 如下图所示 2 解决方案 这需要进入电脑BIOS 更改配置 1 电脑关机 在开机的时候一直点F2 进入到BIOS模式 并把语言设为中文 2
  • 缺陷管理与测试用例

    一 提交缺陷注意实现 可重现 发现缺陷可以在开发人员的电脑上实现 唯一性 每个缺陷有一个编号 也就是编号的ID 缺陷报告每行是一个缺陷 规范性 提交的缺陷需要符合公司制定的规范要求 缺陷报告的规范 ID 标题 重现步骤 期望结果 实际结果
  • 除了快手与抖音,“云想科技们”也在加速“出圈”

    在电商行业 大家可能听说过传统电商行业的 代运营 现在短视频赛道崛起 代企业运营 以效果为前提 做出符合企业品牌价值好的 新的内容的短视频营销服务商也受到更多关注 云想科技就是其中的代表 在行业新常态下 布局新业务依旧是企业寻求增长新动力的
  • Visual Grounding任务常用数据集介绍RefCOCO、RefCOCO+、RefCOCOg、ReferItGame和Flickr30K Entities

    Visual Grounding任务常用的数据集有五个 RefCOCO RefCOCO RefCOCOg ReferItGame和Flickr30K Entities RefCOCO RefCOCO RefCOCOg 是三个从MSCOCO中
  • linux服务器使用gustat指令查看gpu显卡的使用情况(比nvidia-smi好用)

    使用gpustat指令需要先安装gpustat 安装需要root权限 apt install gpustat 查看gpu使用情况 gpustat nvidia smi gpustat相比于nvidia smi查看的信息更加详细 可以看到使用
  • flex布局宽高度设置不成功

    flex布局中 会出现是在宽高 但是不起作用 那是因为flex布局当不够的时候自动压缩了 可以选择 让其不压缩 flex shrink 0 然后在设置宽高 或者利用复合属性 flex 0 0 83rpx 这篇博客是对flex布局的讲解 以及