CSS代码中常见这样的写法:flex:1

这是flex 的缩写: flex-growflex-shrinkflex-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属性设置详解的更多相关文章

  1. display的flex属性使用详解

    flex的兼容性在pc端还算阔以,但是在移动端,那就呵呵了.今天我们只是学习学习,忽略一些不重要的东西. 首先flex的使用需要有一个父容器,父容器中有几个items. 父容器:container 属 ...

  2. jQuery Colorbox弹窗插件使用教程小结、属性设置详解

    jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...

  3. three.js 相机camera位置属性设置详解

    开始很懵逼,完全不能理解,有个position,还要up和lookAt干嘛. [黑人问号脸❓❓❓] 既然是位置属性不明白,那默认其它属性都懂了. 上坐标轴: 先来第一个position属性,可以设置x ...

  4. jQuery Colorbox弹窗插件使用教程小结、属性设置详解以及colorbox关闭

    jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦. jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax ...

  5. css 13-CSS3属性:Flex布局图文详解

    13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...

  6. day17—Flex弹性布局详解(一)

    转行学开发,代码100天——2018-04-02 今天看到一篇大神的文章,关于flex布局的详解,对flex用法介绍的相当详细,非常有助于我等初学者更深入了解这种布局方式. 文章链接 [基础知识]Fl ...

  7. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  8. CSS3教程:pointer-events属性值详解 阻止穿透点击

    转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...

  9. [转]JAVA环境变量JAVA_HOME、CLASSPATH、PATH设置详解

    [转] JAVA环境变量JAVA_HOME.CLASSPATH.PATH设置详解 - dreamman的日志 - 网易博客http://blog.163.com/dreamman_yx/blog/st ...

随机推荐

  1. Github三次学习

    作者声明:本文参照aicoder.com马伦老师的文档,根据自己的学习情况而做的笔记,仅供交流学习. Git入门到高级教程 为什么要进行项目文件的版本管理 代码备份和恢复 团队开发和协作流程 项目分支 ...

  2. 基础系列(5)—— C#控制语句

    语句是程序中最小程序指令.C#语言中可以使用多种类型的语句,每一种类型的语句又可以通过多个关键字实现.以下是C# 语言中使用的主要控制语句 类别 关键字 选择语句  if.else.switch.ca ...

  3. 《我是IT小小鸟》读笔

    兴趣是第一原则.一定要根据自己的兴趣确定发展方向,不要盲目从众和跟风.没有一个人的经历是可以复制的,多思考,不要照搬他人的做法,学习一下想法还是可以的,具体方法因人而异.学习软件技术时,不仅在知识节点 ...

  4. Spring学习(四)—— java动态代理(JDK和cglib)

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他 的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托 ...

  5. C#高级编程(第六版)学习:第三十一章:Windows窗体

    第三十一章 Windows窗体 创建Windows窗体应用程序 在文本编辑器中输入: /* * form.cs * a simple windows form * */ using System; u ...

  6. 转 Maven常用仓库地址以及手动添加jar包到仓库

    转自:http://blog.csdn.net/kqygww/article/details/12837783 共有的仓库 http://repository.sonatype.org/content ...

  7. QT学习记录

    QApplication app(argc,argv); 创建了一个QApplication对象,这个对象用于管理应用程序级别的资源.QApplication的构造函数要求两个参数,分别来自main的 ...

  8. app耗电量测试工具--PowerTutor

    PowerTutor是一款用来测试手机功耗的小工具,它可以只管地展示手机系统主要的组件和各种用户app产生的功耗数据.它可以统计app的屏幕功耗(LCD).CPU功耗以及WiFi和3G网络功耗,我们可 ...

  9. java map添加另一个map时候 键值对的类型要一致

    java map添加另一个map时候 键值对的类型要一致

  10. BZOJ 1226 学校食堂(状压DP)

    状压DP f(i,j,k)表示前i−1个人已经吃了饭,且在i之后的状态为j的人也吃了饭(用二进制表示后面的状态),最后吃的那个人是i之后的第k个 (注意k可以是负数) 然后 如果j&1=1那么 ...