关于ipad的flex-grow:1属性失效问题

最新推荐文章于 2024-07-28 01:07:16 发布
最新推荐文章于 2024-07-28 01:07:16 发布
阅读量820 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihengdao666/article/details/113065068
版权
本文探讨了一个在iPad上使用flex-grow:1属性时遇到的问题，即元素未能占满容器高度。问题源于body元素未设定高度，导致div元素高度自动计算。通过分析W3C标准，解释了百分比高度和flex布局的工作原理。设置flex-basis为0可以解决此问题，使flex-grow生效，使内部元素根据flex容器自动调整高度。
摘要由CSDN通过智能技术生成

问题复现

转载自油猴中文网：https://bbs.tampermonkey.net.cn/forum.php
李恒道QQ4548212
油猴中文网https://bbs.tampermonkey.net.cn/forum.php
TamperMonkey GreaseMonkey 油猴脚本 脚本交流 脚本分享
油猴脚本开发 油猴基础开发 油猴 油猴中文
公众号:叛逆青年旅舍
https://bbs.tampermonkey.net.cn/forum.php

这时div并没有占满

图片.png

图片.png

问题分析

这里是本人参考网络资料得出的结论，由于编程和英语能力薄弱可能存在问题，希望大佬们多多指教

博客大概得出的结论咋https://bbs.tampermonkey.net.cn/thread-205-1-1.html

<
最低0.47元/天 解锁文章
李恒道
关注
移动端热点问题
MingL520的博客
05-31 456
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
前端面试-CSS
wanglu458512的博客
09-19 2980
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
Flex弹性布局给子组件设置flex-grow权重属性不生效问题
qq_23404533的博客
01-19 703
如上scss样式给所有子组件设置flex-grow平分父组件宽度，发现当子组件中内容变化时子组件所占宽度不再是平分宽度；需给每个子组件设置下宽度：width: 0;
flex-grow: 1 导致的滚动内容无限撑开父容器（嵌套 flex 导致 overflow: auto 失效）| 左右布局右边元素被挤出屏幕
最新发布
qq_41567818的博客
07-28 398
这个问题主要是 flex-grow: 1 引起的，这个概念可以搜索“Intrinsic and Extrinsic Sizing”以深入了解浏览器对于内容大小的计算机制逻辑。简单来说，就是 flex-grow: 1 启用时，该元素会无限“贪婪”的吃掉剩余的空间，并且尽可能的多容纳内部元素，他会不断向上检查，直到碰到了一个“固定大小”的元素，才会停止“贪婪”。
flex-grow不起作用
CRT本人的博客
05-28 728
想要实现右侧固定宽度，左侧时是（总宽度-右侧宽度） 随着父组件宽度自动变化 但是太窄时，flex-grow不起作用，会把左侧固定的div也变窄。 解决： 给左侧添加 width:0; <div class="content"> <div class="left"> 我的宽度是剩余宽度 </div> <div class="right"> 我的宽度固定 </div> </div> .cont.
Flex布局中的flex-grow无效问题
小妖666个人笔记
10-10 3736
今天用flex布局画table，当设置表头间距的时候用到了flex-grow属性，全部设置成1后并没有出现距离等分的效果。 lex-grow重点在 lex-grow重点说明落在 剩余 这两个字上，父元素剩余的空间，那什么算父元素剩余空间呢，简单的理解就是(父元素的宽度-子元素总和的宽度)，这里有两种情况： (1)子元素没有设置宽度：那么整个父元素的宽度就是剩余宽度，这个时候flex-grow可...
display:flex 的弹性盒子中，flex-grow:2 不生效的解决方法
xuan2717的博客
09-29 379
display:flex 的弹性盒子中，flex-grow:2 不生效的解决方法
HTML5+CSS3---弹性盒子模型
qq_45802159的博客
11-23 819
Flex 布局 Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box { display: flex; } 行内元素也可以使用 Flex 布局。 .box { display: inline-flex; } 注意，设为 Flex 布局以后，子元素的float、...
深入理解css3中的flex-grow、flex-shrink、flex-basis （转）
weixin_33800593的博客
03-10 1952
转自：http://zhoon.github.io/css3/2014/08/23/flex.html 感谢他的整理 flex为css的布局带来了新的时代，作为一个重构工程师，我们再也不用局限于float和position，特别是在移动端，我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。 本文主要讲解flex的三个子属性：flex-grow、f...
flex布局异常（flex-grow：1）
u011649691的博客
12-02 335
https://blog.csdn.net/qq_41075132/article/details/82865248
flex-grow
弱智de克星
01-17 920
flex-grow
谈谈flex:1的理解
ljb376766764的博客
07-25 1236
谈谈flex:1的理解
Oracle批量执行脚本
HMing的博客
12-14 901
单个脚本： xxx.sql ......... 批量脚本： 1、以ANSI码进行文件保存 2、@\后不要跟空格 set define off; prompt 当前执行的脚本文件:(xxxxxxxxxxxx.sql) @\xxxxxxxxx.sql; ........【多个脚本集合在一起、至于存储过程和其他脚本就需要分开执行】 commit; ...
Flex的flex-grow：1与flex-shrink1，0
世界既不黑也不白，而是一道精致的灰。
12-25 2280
Flex的flex-grow：1与flex-shrink1，0 flex-grow: 0; / 0表示正常状态，不放大 / flex-grow: 1; / 1表示一旦发生变化，弹性子元素的宽度也会做出相应的调整。 flex-shrink: 0; / 因为弹性盒子display:flex设置之后，当盒子个数过多时，小盒子会自动缩放，当拉着浏览器的右侧伸缩时，盒子会跟着伸缩，一起缩放。但是加了flex-shrink之后，盒子就不会跟着缩放了，实实在在的有多宽就是多宽，会出现水平滚动条 /
flex 的 三个参数：flex-grow、flex-shrink、flex-basis
热门推荐
潮汐未见潮落的博客
08-09 1万+
flex 的三个属性介绍
flex:1与flex-grow:1最简单的区别与计算
weixin_49684995的博客
08-08 3434
一、flex的宽度计算方式是容器剩余空间+具有flex属性的元素自身尺寸： 例如在一个width:400px的容器中，有a、b、c 三个width:100px的元素，给a元素flex:2的属性，给b元素flex:1的属性，不给c元素。 计算宽度是：剩余空间（400px-300px）:100px + 参与flex项目尺寸200px=300px 再按3份的比例给a2份，b1份。 最后：a:width:200px ; b:width:100px ; c:width:100px 二、flex:grow的
Flex布局中的Flex-Grow无效问题
wangqiuwei07的专栏
07-14 1529
最近在写项目的时候用了一个新的css属性flex,这个属性之前测试过了,可以用,而且看了他的兼容性,直接上图 就这个兼容性,已经可以满足大部分的主流浏览器了,更何况我是微信开发,近似可以看做是android Browser的兼容性,那么就这么看,已经十分满足我的需求了 但是,问题来了我在使用flex-grow的属性时,发现这个属性十分怪异,按照一般的博客或是介绍上来看,简单地可以理解为是按照...
flex:1和flex-grow:1的区别
10-14
`flex:1` 是 `flex-grow:1`、`flex-shrink:1` 和 `flex-basis:0` 的缩写。其中，`flex-grow:1` 表示该元素在剩余空间中占据的比例为 1，即等分剩余空间；`flex-shrink:1` 表示该元素在空间不足时缩小的比例为 1，即...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值