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 ...
随机推荐
- 2018软工实践—Alpha冲刺(6)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 测试服务器并行能力 学习MSI.CUDA ...
- Alpha事后诸葛会议
[设想和目标] Q1:我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? "小葵日记"是为了解决18-30岁年轻用户在记录生活时希望得到一美体验友好 ...
- java程序连接MySQL数据库
驱动程序:mysql-connector-java-5.1.7-bin.jar. 程序示例如下: package commonProject; import java.sql.Connection; ...
- 运维学习笔记(三)之T01-03TCP/IP
TCP/IP协议 简介 通信协议 信息从源传递到目的地的过程中,网络上各设备需要通信,描述网络通信“语言”的规范就是协议. 数据通信协议 决定数据的格式和传输的一组规则. TCP/IP协议简介 一组通 ...
- linux 虚拟网络模型介绍
第一种隔离模型 每一个虚拟机实例的网卡都有两个接口,一端接在虚拟机内部,一端接在宿主机内部,如上图所示eth0就是接在虚拟机内部的,而vnet0就是接在宿主机内部的,只要再创建一个虚 ...
- bond下改变网卡
浪潮服务器打开控制台 用ip addr查看哪个网卡是绑定的,eth2和eth4是绑定状态 用mv命令,更改网卡名称 并将每个网卡里的信息更改 reboot,重启 ip addr查看,eth6和eth8 ...
- kafka describe 显示结果解释
> bin/kafka-topics.sh --describe --zookeeper localhost:2181 --topic my-replicated-topic Topic:my- ...
- VC的常用调试方法
前言 VS是非常强大的IDE,所以掌握VSVC的常用方法,将会使得我们找出问题解决问题事半功倍. 目录 VSVC的常用调试方法 前言 1. Watch窗口查看伪变量 2. 查看指针指向的一序列值 3. ...
- PHP中类和对象
面向对象中的基本概念 类和对象 对象: 万物皆对象: 类: 任何对象,都可以人为“规定”为某种类型(类别): class Person{ var $name ; var $age; var ...
- js & array to string
js & array to string https://stackoverflow.com/questions/13272406/convert-string-with-commas-to- ...