flex 布局,flex-grow 宽度未等比放大问题解决办法
本文转载自:https://blog.csdn.net/sinat_41695090/article/details/79215893
先粘贴上一段代码,flex总体布局
<body> <div class="total"> <div class="one">第一个</div> <div class="two">第二个</div> <div class="three">第三个</div> </div> </body>
css样式
*{ margin:; padding: ; } .one{ background: #f00; } .two{ background: #0f0; height: 30px; } .three{ background: #00f; height: 60px; } .total{ width: 900px; height: 100px; display: flex;
display: -webkit-flex; background: #ff0; flex-direction: row; -webkit-flex-direction:row; flex-wrap:wrap; -webkit-flex-wrap:wrap; justify-content:space-between; -webkit-justify-content:space-between; } .total>div{ flex-grow:; -webkit-flex-grow:; } .total>.two{ flex-grow:; -webkit-flex-grow:; }
第二个div设置flex-grow为2,另外两个均为1.
实际效果第二个div并没有是其他两个div的宽度的二倍,似乎是不到二倍,但确实是比另外两个要大,这是为什么呢?
后来经过一番折腾终于搞明白了,是自己的理解有误,参考于阮一峰先生的相关文章,链接在这里flex布局教程。
自己总结了三个解决办法:
一、结合flex-basis
将整体div样式进行修改,加入flex-basis属性
.total>div{ flex-grow:; -webkit-flex-grow:; flex-basis:; -webkit-flex-basis:; }
设置项目固定空间均为0;
二、不单设置flex-grow属性,设置flex综合属性
这一点在阮一峰老师文章中有提到,建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
单单设置flex-grow的数值时,因为这时flex-basis的值为auto,项目占据了相应的固定空间,导致设置错误。
.total>div{ flex:; } .total>.two{ flex:; }
三、去掉div文本内容
这种方法是使div中不含有固定宽度,设置二倍不成功的根本原因就在这儿,因为div中的文本占有固定宽度,我们都知道flex-grow设置的是剩余空间的大小分配,而剩余空间就是去掉文本之后的空间,大家可以自己计算一下,为什么不是我们想要的二倍,去掉div中的文本,就相当于去掉了固定空间,如下
<body> <div class="total"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </body>
.total>div{ flex-grow:; -webkit-flex-grow:; } .total>.two{ flex-grow:; -webkit-flex-grow:; }
这样设置出来也是二倍关系,当然,这种方法肯定不推荐
其实,这三种方法的原理实际上是一样的,都是使固定空间为0,切记flex-grow设置的是剩余空间的分配比例,分配之前一定要先除去实际固定空间在进行计算。
flex 布局,flex-grow 宽度未等比放大问题解决办法的更多相关文章
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- [flex 布局]——flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- flex布局基本语法
注 : 本文章按照菜鸟教程 Flex布局语法教程为原型稍加修改,以方便自己学习. 菜鸟教程地址:http://www.runoob.com/w3cnote/flex-grammar.html 2009 ...
- 第103天:CSS3中Flex布局(伸缩布局)详解
一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行 ...
- flex布局中flex-grow与flex-shrink的计算方式
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...
- flex布局使用
什么是flex布局 flex是flexible Box的缩写,意味"弹性盒子",用来为盒子状模型提供最大的灵活性 任何一个盒子都可以指定为flex布局 .box{ display: ...
- Flex布局的详细总结
Flex布局的详细总结 1.认识flex布局 flex布局(flexible布局,弹性布局),是目前web开发中使用的最多的布局方案. 两个重要概念: 开启flex布局的元素叫flex contain ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 微信小程序之Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
随机推荐
- 在IIS7以上导出所有应用程序池的方法批量域名绑定(网站绑定)
在IIS7+上导出所有应用程序池的方法: %windir%/system32/inetsrv/appcmd list apppool /config /xml > c:/apppools.xml ...
- 怎么知道dll文件是哪个net版本
有时候经常需要查看.dll所使用的.net版本, 因为根本不知道它是使用了1.1还是2.0, 或者是3.0, 这个时候如果需要打开vs.net那又太麻烦, 所以经过长久的摸索, 我找到了一个比较简便的 ...
- vue实现轮播效果
vue实现轮播效果 效果如下:(不好意思,图有点大:) 功能:点击左侧图片,右侧出现相应的图片:同时左侧边框变颜色. 代码如下:(也可以直接下载文件) <!DOCTYPE html> &l ...
- Cocos2d-x之Layer
| 版权声明:本文为博主原创文章,未经博主允许不得转载. Layer是处理玩家事件响应的Node子类.与场景不同,层通常包含的是直接在屏幕上呈现的内容,并且可以接受用户的输入事件,包括触摸,加速度 ...
- Mysql 生成随机数字
其实思路很简单,利用MySQL现有的函数,然后进行加工处理,达到预期的结果.可以用到的MySQL函数为rand() ,以及 round() 函数. 具体为:select round(rand()*10 ...
- helm-mode打开文件支持中文搜索
helm-mode打开文件支持中文搜索 */--> code {color: #FF0000} pre.src {background-color: #002b36; color: #83949 ...
- Java中使用File类删除文件夹和文件
删除工具类: import java.io.File; public class DeleteAll{ public static void deleteAll(File file){ if(file ...
- Python-数字类型补充
Python第五节数字类型补充 数字类型转换 int(x) float(x) complex(x) complex(x, y) 数学常量 pi e PS 数字类型不允许改变 也就是说,当我们对数字类型 ...
- ASE团队项目alpha阶段Frontend组 scrum2 记录
ASE团队项目alpha阶段Frontend组 scrum2 记录 本次会议于11.5日, 11:30在微软北京西二楼13158研讨室,讨论持续15分钟 与会人员:Jingyi Xie, Jiaqi ...
- Linux (ifconfig/docker) 移除网桥/虚拟网卡
今天上大数据实践课时,使用学校提供的云主机平台创建了几台vps,但是安全组配置好之后发现无法用ssh无法登录,ping也不通,提示网络无法到达. 但是拿别人的电脑试了下能顺利使用ssh连接. 有人说是 ...