谈一谈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单值、双值、三值的赋值规则是怎么样的
单值情况下:
- 一个无单位的数字:它会被当作
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
谈一谈flex布局使用中碰到的一些问题的更多相关文章
- flex布局浅谈
flex布局浅谈和实例 阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉 ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- flex布局浅谈和实例
阿基米德曾说给我一个支点我可以撬动地球,而拥有flex基本可以撬动所有的布局. 1.flex布局基本介绍及效果展示 工欲善其事必先利其器,来来来,一起看下基础知识先(呵~,老掉牙,但是有用啊). ** ...
- 浅谈flex布局中小技巧
最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x.x可以自适应.如下图: 怎么做很简单,两行代码就搞定: justi ...
- 【分享】谈CSS3中display属性的flex布局
最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*fl ...
- 浅谈flex布局
Flex布局,俗称弹性布局,有了这个布局,咱们做的事情很多,以前那些很难实现比如说垂直居中之类都不存在了. 盒模型布局依赖于float,display,定位之类的方式来布局,这种的布局对一些特殊布局来 ...
- 浅谈css的栅格布局
栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...
- 小白入门篇:flex布局
--前言 因为这个星期写一个小的项目用到flex布局和grid布局,虽然这两种布局都是兼容性都有问题,但是别急,我觉的以后肯定是会发展并且流行起来的,毕竟google大法好,而且这两个布局真的比一般的 ...
- 一篇文章弄懂flex布局
壹 ❀ 引 谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生 ...
随机推荐
- mysqldump 工具使用详解——参数选项
mysqldump 简介 mysqldump 是一种用于逻辑备份的客户端工具,它会产生一套能够重新构建数据库或表的SQL语句.所谓逻辑备份:是利用SQL语言从数据库中抽取数据并存于二进制文件的过程.逻 ...
- 函数和代码复用 --Python
1.关于递归函数的描述,以下选项中正确的是 A.包含一个循环结构 B.函数比较复杂 C.函数内部包含对本函数的再次调用 D.函数名称作为返回值 答案:D 答案解析:递归函数是指函数内部包含对本函数的再 ...
- elasticsearch接口开发(新)
此文在上一篇文章的基础上稍做了些许修改,主要在springboot整合ES后的包路径上,如下是新的目录结构 下面贴出代码 MyConfig.java package com.ylht.config; ...
- safari 日期显示NAN
解决方案: 1.服务器端将时间转换为时间戳,前端再进行处理,问题解决. fastjson,JSON.toJSONString() 自动将时间字段转换为时间戳类型,然后传到前端. @RequestMap ...
- 跟我一起玩Win32开发(9):绘图(B)
我们今天继续涂鸦,实践证明,涂鸦是人生一大乐趣. 首先,我们写一个程序骨架子,以便做实验. #include <Windows.h> LRESULT CALLBACK MainWinPro ...
- 网站如何从http升级成https
基本概念: HTTP: 是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准,用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少. HT ...
- adb shell报错:error: insufficient permissions for device的解决办法
1.错误描述 执行 adb shell 时,报错如下; error: insufficient permissions for device 2.解决办法 1,终端执行 lsusb 结果如下,注意绿 ...
- RHEL 6.5----apr-util1.6执行make时报错
报错信息 ]: Entering directory `/usr/local/src/apr-util-' /bin//build-/libtool --silent --mode=compile / ...
- 牛人cad二次开发网站(.net)
http://through-the-interface.typepad.com/through_the_interface/autocad_net/ http://through-the-inter ...
- Android手机app耗电量测试工具 - Gsam Battery Monitor
这段时间需要测试一个Android手机app的耗电量,在网上找了一个工具,Gsam Battery Monitor,觉得挺好用,和大家分享一下. 安装app后打开,可以看到主界面是这样的 点击一下上图 ...