flex属性设置详解
CSS代码中常见这样的写法:flex:1
这是flex
的缩写: flex-grow
、flex-shrink
、flex-basis
,其取值可以考虑以下情况:
1. flex
的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex
的默认值是 0 1 auto。同理,如下是等同的:
.item {flex: 2333 3222 234px;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: 234px;
}
2. 当 flex
取值为 none
,则计算值为 0 0 auto,如下是等同的:
.item {flex: none;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: auto;
}
3. 当 flex
取值为 auto
,则计算值为 1 1 auto,如下是等同的:
.item {flex: auto;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: auto;
}
4. 当 flex
取值为一个非负数字,则该数字为 flex-grow
值,flex-shrink
取 1,flex-basis
取 0%,如下是等同的:
.item {flex:;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: 0%;
}
5. 当 flex
取值为一个长度或百分比,则视为 flex-basis
值,flex-grow
取 1,flex-shrink
取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):
.item-1 {flex: 0%;}
.item-1 {
flex-grow:;
flex-shrink:;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
flex-grow:;
flex-shrink:;
flex-basis: 24px;
}
6. 当 flex
取值为两个非负数字,则分别视为 flex-grow
和 flex-shrink
的值,flex-basis
取 0%,如下是等同的
.item {flex: 2 3;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: 0%;
}
7. 当 flex
取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow
和 flex-basis
的值,flex-shrink
取 1,如下是等同的:
.item {flex: 2333 3222px;}
.item {
flex-grow:;
flex-shrink:;
flex-basis: 3222px;
}
8. flex-basis
规定的是子元素的基准值,所以是否溢出的计算与此属性息息相关
flex-basis
规定的范围取决于 box-sizing
。这里主要讨论以下 flex-basis
的取值情况:
auto
:首先检索该子元素的主尺寸,如果主尺寸不为auto
,则使用值采取主尺寸之值;如果也是auto
,则使用值为content
。content
:指根据该子元素的内容自动布局。有的用户代理没有实现取content
值,等效的替代方案是flex-basis
和主尺寸都取auto
。百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为
auto
一样。
9. 举例
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div> <style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
主轴上父容器总尺寸为 600px
子元素的总基准值(flex-basis)是:0% + auto + 200px = 300px,其中
- 0% 即 0 宽度
- auto 对应取主尺寸即 100px故剩余空间为 600px - 300px = 300px
伸缩放大(flex-grow)系数之和为: 2 + 2 + 1 = 5
剩余空间分配如下:
- item-1 和 item-2 各分配 2/5,各得 120px
- item-3 分配 1/5,得 60px各项目最终宽度为:
- item-1 = 0% + 120px = 120px
- item-2 = auto + 120px = 220px
- item-3 = 200px + 60px = 260px当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 140px,也并没有什么用,形同虚设
而 item-2 基准值取
auto
的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间
文章来源: https://segmentfault.com/q/1010000004080910/a-1020000004121373
flex属性设置详解的更多相关文章
- display的flex属性使用详解
flex的兼容性在pc端还算阔以,但是在移动端,那就呵呵了.今天我们只是学习学习,忽略一些不重要的东西. 首先flex的使用需要有一个父容器,父容器中有几个items. 父容器:container 属 ...
- jQuery Colorbox弹窗插件使用教程小结、属性设置详解
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...
- three.js 相机camera位置属性设置详解
开始很懵逼,完全不能理解,有个position,还要up和lookAt干嘛. [黑人问号脸❓❓❓] 既然是位置属性不明白,那默认其它属性都懂了. 上坐标轴: 先来第一个position属性,可以设置x ...
- jQuery Colorbox弹窗插件使用教程小结、属性设置详解以及colorbox关闭
jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...
- css 13-CSS3属性:Flex布局图文详解
13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...
- day17—Flex弹性布局详解(一)
转行学开发,代码100天——2018-04-02 今天看到一篇大神的文章,关于flex布局的详解,对flex用法介绍的相当详细,非常有助于我等初学者更深入了解这种布局方式. 文章链接 [基础知识]Fl ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- CSS3教程:pointer-events属性值详解 阻止穿透点击
转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...
- [转]JAVA环境变量JAVA_HOME、CLASSPATH、PATH设置详解
[转] JAVA环境变量JAVA_HOME.CLASSPATH.PATH设置详解 - dreamman的日志 - 网易博客http://blog.163.com/dreamman_yx/blog/st ...
随机推荐
- java高cpu占用和高内存占用问题排查 (转)
高cpu占用 1.top命令:Linux命令.可以查看实时的CPU使用情况.也可以查看最近一段时间的CPU使用情况. 2.PS命令:Linux命令.强大的进程状态监控命令.可以查看进程以及进程中线程的 ...
- 关于requestanimationframe
首先字面理解,请求动画框架, 用法: var nextFrame = (function() { return window.requestAnimationFrame || window.webki ...
- 6. 网络信息API
一.用数值表示socket地址&用名字表示socket地址(socket地址==>IP地址和端口号) 1. 用数值表示socket地址不便于记忆,也不便于扩展(比如从IPv4转移到IPv ...
- 用C++实现简单随机二元四则运算
让我们想看看二元四则运算都需要实现什么: (1) 定制题目数量 (2) 是否有乘除法 (3) 题目数值范围 (4) 加减有无负数 (5) 除法有无余数 (6) 是否支持分数(真分数.假分数…) (7) ...
- DELL服务器PXE前期处理
thaks:https://www.cnblogs.com/520ZXL/ PXE批量推系统,服务器要具备条件:raid处理好,设置为pxe启动,与PXE服务器网络要通 先进入磁盘阵列(ctrl+R) ...
- 【week10】psp
项目 内容 开始时间 结束时间 中断时间 净时间 2016/11/19(星期六) 写博客 吉林一日游规格说明书 10:30 15:10 20 260 2016/11/20(星期日) 看论文 磷酸化+三 ...
- 从装饰者模式的理解说JAVA的IO包
1. 装饰者模式的详解 装饰者模式动态地将责任附加到对象上.若要扩展功能,装饰者提供了比继承更有弹性 的替代方案. 装饰者模式设计类之间的关系: 其 中Component是一个超类,ConcreteC ...
- CF486D-Valid Sets
题目 给出一个\(n\)个点的树,每个点有权值\(a_i\),再给出一个\(d\),问有多少个非空点集满足: 点集在树上构成联通子图 \[\max _{v\in S}a_v -\min _{v\in ...
- Java开发Excel POI getPhysicalNumberOfCells 与 getLastCellNum的区别
1.getPhysicalNumberOfCells 与 getLastCellNum的区别 用org.apache.poi的包做excel导入,无意间发明若是excel文件中有空列,空列后面的数据全 ...
- C++解析(18):C++标准库与字符串类
0.目录 1.C++标准库 2.字符串类 3.数组操作符的重载 4.小结 1.C++标准库 有趣的重载--操作符 << 的原生意义是按位左移,例:1 << 2;,其意义是将整数 ...