谈一谈flex布局使用中碰到的一些问题
起因
工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下。
flex三个值的含义
众所周知,flex布局所有的属性有两种:一种作用在弹性容器(Flex container)上,一种作用在弹性项目(Flex item)上,而flex就是作用在弹性项目上的属性。
flex
是 flex-grow
、flex-shrink
、flex-basis
三个值的简写,这个值规定了弹性项目如何伸长或压缩以适应弹性容器中的可用空间。
flex-grow
定义弹性项目的放大比列,可以接受数字(小数也可以),不接受负值,默认值是 0 。这个值如果为 0 就意味着即使容器内还存在剩余空间,弹性项目也不会放大。
flex-shrink
定义弹性项目的收缩比例,同样接受数字(小数也可以),不接受负值,默认值是 1 。如果一个弹性项目的 flex-shrink
设为 0 而其他弹性项目的 flex-shrink
值为 1 ,则当弹性容器空间不足时,该弹性项目不会被压缩,而其他的弹性项目会被等比例压缩。
flex-basis
定义在分配容器内空间之前,弹性项目占据的主轴空间(不一定是宽度,因为主轴方向可以是纵向的),默认值是 auto 。如果对弹性项目同时设置 flex-basis
和 width
, width
会被忽略。还要注意当主轴是横向的时候,如果设定了 max-width
或 min-width
会限制弹性项目的宽度。
这里讲一下 flex-basis
取值的情况:
- 指定的数值,比如以px、em为单位的数值。
- 百分数,取百分数的话就是相对其父弹性容器的宽或高(取决于主轴方向)来计算,如果包含块的尺寸未指定(也就是说父元素的尺寸取决于子元素),那么这时候结果和
auto
一样。 auto
值的意思是基于弹性项目的width
或height
调整大小(根据主轴的横向或者纵向),如果没有设置width
或height
则根据内容自适应。
设置flex之后的弹性项目如何计算宽度
这里给一个代码的例子
<div id="content"><div class="box1" style="background-color:red;">A</div><div class="box2" style="background-color:lightblue;">B</div><div class="box3" style="background-color:yellow;">C</div>
</div>
#content {display: flex;width: 360px;
}.box1 {width: 100px;flex: 1 1 0;
}.box2 {width: 100px;flex: 1 1 0;
}.box3 {width: 100px;flex: 1 1 0;
}
由于flex-basis的值为 0 ,所以此时弹性容器的剩余空间为 360px - 0 * 3 = 360px
,由于3个元素都设置了 flex-grow: 1
,所以剩余空间3个元素所占比例为 1:1:1
,每个元素的宽度就是 360px / 3 = 120px
。
如果把代码改一下呢?
#content {display: flex;width: 360px;
}.box1 {width: 100px;flex: 1 1 0;
}.box2 {width: 100px;flex: 1 1 auto;
}.box3 {flex: 1 1 200px;
}
此时,弹性容器内剩余宽度为:360px - 0 - 100px - 200px = 60px
,3个元素所占剩余空间比例同样是 1:1:1
。那么宽度分别就是:0 + 20px = 20px
,100px + 20px = 120px
,200px + 20px = 220px
。
对应复杂情况的计算,这里有一个回答写得不错:
flex设置成1和auto有什么区别
flex单值、双值、三值的赋值规则是怎么样的
单值情况下:
- 一个无单位的数字:它会被当作
flex-grow
的值,flex-shrink
为 1 ,flex-basis
为 0%。 - 一个有效的宽度值:它会被当作
flex-basis
的值,flex-shrink
和flex-grow
都是 1 。 - 关键字:比如
auto
,none
这两个下文会讲。
双值情况下:
第一个值必须是无单位的数字,它会作为 flex-grow
的值;第二个值可以是:
- 一个无单位的数字:它会被当作
flex-shrink
的值,而flex-basis
的值就是 0% 。 - 一个有效的宽度值:它会被当作
flex-basis
的值,flex-shrink
的取值就是 1 。
三值情况下:
第一个和第二个值必须是无单位的数,分别作为 flex-grow
,flex-shrink
,flex-basis
的值;第三个值可以是有效的宽度值,也可以是 auto
。
flex: 0,flex: 1,flex: auto,flex: none,flex: 0%的区别是什么?
讲完了上面的三种赋值方式之后,那么简写就变得很容易理解了:
flex: 0
是flex: 0 1 0%
的简写flex: none
是flex: 0 0 auto
的简写flex: 1
是flex: 1 1 0%
的简写flex: auto
是flex: 1 1 auto
的简写flex: 0%
是flex: 1 1 0%
的简写
小结一下:以上就是对 flex
这个属性取值的梳理,最近一年没有写过博客,最近还是要填一下坑的,前端之路且歌且行~
原文地址:https://segmentfault.com/a/1190000016899455
转载于:https://www.cnblogs.com/lalalagq/p/9907677.html
谈一谈flex布局使用中碰到的一些问题相关推荐
- 浅谈CSS3中display属性的Flex布局,关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念 采用Fl ...
- java中display中的属性_浅谈CSS3中display属性的Flex布局
最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: colum ...
- 谈一谈开发网盘中碰到的问题(一)
谈一谈开发网盘中碰到的问题(一) 首先介绍一下项目:土星云企业网盘(http://www.saturncloud.com.cn/netdisk),一款基于vue+element ui面向企业和用户的人 ...
- ReactNative之Flex布局总结
ReactNative之Flex布局总结 从二月份开始学习ReactNative到现在已经有两个月了,零碎的记录了很多笔记,一直想写一些ReactNative相关的东西,奈何感觉自己学习的还比较浅陋, ...
- 谈一谈对 TailwindCSS 的看法
谈一谈对 TailwindCSS 的看法 从 NPM.DEVTOOL 的标签中可以看出: 每个月 npm 下载量高达 300 万次,jsDelivr 下载量更是高达 900万次,Star 数也即将突破 ...
- 有一群200w年薪的朋友是什么感觉?谈一谈入学中国科学院大学的几点感受吧
我叫阿广,偶尔正经,偶尔逗比,97年生人,在求学期间当过鸡头鸡尾,当过凤尾没当过凤头.大家如果想深入了解我,可以查看本公众号的原创文章. 技术人光有技术走不长久,所以今天不更新技术文章了,也给大家谈一 ...
- python 二维数组长度_谈一谈多维数组
谈 一 谈 多 维 数 组 在各种语言中,都提供了多维数组.而多维数组又是很让人迷惑的一个语法结构.今天给大家聊一下多维数组使用中的一些问题. 这里,以Python和IDL为主讲解. 多维数组的概念 ...
- 演示和解析Flex布局中的各种属性
文章目录 文章导读 一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
- 快应用采坑与flex布局讲解
快应用之flex布局 在我们常用的布局中有display + position + float进行布局,但是这些布局或多或少都有些麻烦(虽然我最喜欢用position,哈哈啥都能干).但是由于快应用只 ...
最新文章
- linux 检索全部文件中的中文词汇,linux – 获取所有文件中的单词计数
- jboss1.7_在JBoss Fuse / Fabric8 / Karaf中使用Byteman
- php 替换 乱码,php文字替换出现乱码
- php switch goto,PHP goto语句用法实例
- [转载] python笔记
- 数组成员是函数java_在Laravel 5.6中调用数组上的成员函数links()
- [转] Windows Server 2012 Beta (Hyper-V 3.0) VM Replica與Live Migration Winout Shared Storage
- 使用arcgis进行夜间灯光数据处理
- Playmaker节点工具使用(三)—扩展playmaker
- python绘制箱线图-python绘制箱线图
- 渗透测试与漏洞扫描详解
- 《漫游》之《耽美幻想》
- iCollections—桌面管理工具
- 如何知道PDF是不是正常的A4大小尺寸?
- 论文笔记之Understanding and Diagnosing Visual Tracking Systems
- 四年级下册计算机作业,科学(四年级下册)作业.doc
- jdbc之oracle
- 机器学习中精确率(precision)、召回率(recall)和准确率(accuracy)的理解
- 中美自动驾驶进入全格局竞争,湖南湘江新区智能系统测试区可成为关键一招吗?...
- android打包apk不能安装程序,Android Studio 打包apk后应用未安装