首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况:
flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex 的默认值应当是 0 1 auto。同理,如下是等同的:

.item {flex: 2333 3222 234px;}
.item {
flex-grow: 2333;
flex-shrink: 3222;
flex-basis: 234px;
}

1.当 flex 取值为 none,则计算值为 0 0 auto,如下是等同的:
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

2.当 flex 取值为 auto,则计算值为 1 1 auto,如下是等同的:
.item {flex: auto;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

3.当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}

4.当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):
.item-1 {flex: 0%;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 24px;
}

5.当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%,如下是等同的:
.item {flex: 2 3;}
.item {
flex-grow: 2;
flex-shrink: 3;
flex-basis: 0%;
}

6.当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1,如下是等同的:
.item {flex: 2333 3222px;}
.item {
flex-grow: 2333;
flex-shrink: 1;
flex-basis: 3222px;
}

fllex-basis:

flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论一下 flex-basis 的取值情况:
auto:首先检索该子元素的主尺寸,如果主尺寸不为 auto,则使用值采取主尺寸之值;如果也是 auto,则使用值为 content。
content:指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值,等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。

flex属性的取值的更多相关文章

  1. Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值

    Java循环一个对象的所有属性,并通过反射给这些属性赋值/取值 说到循环遍历,最常见的遍历数组/列表.Map等.但是,在开发过程中,有时需要循环遍历一个对象的所有属性.遍历对象的属性该如何遍历呢?查了 ...

  2. Cascade属性的取值

    Cascade属性的取值有:1.none:忽略其他关联的对象,默认值.2.save-update:当session通过save(),update(),saveOrUpdate()方法来保存或更新对象时 ...

  3. spring scope 属性的取值

    Spring 容器是通过单例模式创建 Bean 对象的,也就是说,默认情况下,通过调用 ac.getBean("mybean")方法获得的对象都是同一个 mybean 对象 使用单 ...

  4. 超链接target属性的取值和作用?

    <a>标签的target属性规定在何处打开连接文档 属性值 _black:点击一次打开一个新窗口 _new:始终在同一个新窗口中打开 _self:默认,在当前窗口打开 _parent:在父 ...

  5. Content-Type属性的取值和作用

    1.Content-Type 的值类型: 1.1 application/json:消息主体是序列化后的 JSON 字符串 1.2 application/x-www-form-urlencoded: ...

  6. JQuery里属性赋值,取值prop()和attr()方法?

    1.赋值的时候 如果是<input type="checkbox" checked>这样的只有属性名就能生效的属性 推荐prop,即:$('input').prop(' ...

  7. Python:高级主题之(属性取值和赋值过程、属性描述符、装饰器)

    Python:高级主题之(属性取值和赋值过程.属性描述符.装饰器) 背景 学习了Javascript才知道原来属性的取值和赋值操作访问的“位置”可能不同.还有词法作用域这个东西,这也是我学习任何一门语 ...

  8. JQuery里input属性赋值,取值prop()和attr()方法?

    一.赋值的时候 如果是<input type="checkbox" checked>这样的只有属性名就能生效的属性 推荐prop,即:$('input').prop(' ...

  9. C# 遍历类的属性并取出值

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    今天有点胡思乱想,想遍历MVC Model的属性并 ...

随机推荐

  1. VBA 第一天

    公司实习第一天,excel搞不定啊,学点VBA留着用: 录制宏: 点击录制宏按钮以后,在这段期间你做的每一个操作都会被记录下来,直到你点击停止录制按钮才能够停下,停下来后在此期间每一个操作都会以宏代码 ...

  2. BZOJ 3339 线段树

    思路: 考虑离线处理 显然 l固定时 r越大 ans越大 那我们不妨按照l从小到大排序 l->l+1的时候 l到next[l]这段区间都跟a[l]取min就好了 搞颗线段树维护一下 //By S ...

  3. BZOJ 2301 莫比乌斯函数+分块

    思路: 同BZOJ1101 就是加个容斥 - http://blog.csdn.net/qq_31785871/article/details/54340241 //By SiriusRen #inc ...

  4. Opencv 编译

    转载 https://www.cnblogs.com/xinxue/p/5766756.html OpenCV 3.4 版本,圣诞节前发布了,该版本新增了一种去掉视频背景的算法,dnn 模块的进一步改 ...

  5. eclipse启动错误:An internal error occurred during: "reload maven project".

    解决方案一: 简单粗暴!直接删除E:\eclipseWorkspace\.metadata目录!然后再单个导入eclipseWorkspace中的项目. 解决方案二: 打开这个配置文件:E:\ecli ...

  6. python 3.x 学习笔记11 (静态、类、属性、特殊成员方法)

    1.静态方法通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法.静态方法是不可以访问实例变量或类变量的即没有self,一个不能访问实例变量和类变量的方法,其实相当于跟类本身已经没什 ...

  7. oc消息转发机制本质

    第一级转发:主体不变,动态添加对应函数: 第二级转发:函数不变,切换接收主体: 第三极转发:函数签名不变,主体和函数都有可能变化: 1.使用函数的动态添加技术: 2.使用的类似is-a swzzing ...

  8. SpringCloud学习笔记(14)----Spring Cloud Netflix之Hystrix对Feign的支持

    1. Hystrix对Feign的支持 添加Feign中IUserBiz的实现类HystrixFallBack: package com.wangx.cloud.springcloud02consum ...

  9. js闭包详解-转自好友trigkit4

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...

  10. mycat读写分离+垂直切分+水平切分+er分片+全局表 测试

    原文http://blog.163.com/bigoceanwu@126/blog/static/172718064201683031639683/ 读写分离:利用最基础的mysql主从复制,事务性的 ...