优先级:content –> width –> flex-basis (limted by max|min-width)
原文: https://www.jianshu.com/p/17b1b445ecd4
--------------------------------------------
最近在学习Flex Box,其中的Flex Box属性中的Flex Basis是关于项目宽度属性设置的,这让许多初学Flex Box的人困惑它与CSS盒子模型Width属性的区别在哪?Google了一番,找到一篇解释写得很是不错的文章,尝试着翻译分享一下。
原文地址:http://gedd.ski/post/the-difference-between-width-and-flex-basis/
Flex Items的应用准则
content –> width –> flex-basis (limted by max|min-width)
也就是说,
- 如果没有设置flex-basis属性,那么flex-basis的大小就是项目的width属性的大小
- 如果没有设置width属性,那么flex-basis的大小就是项目内容(content)的大小
下面通过给一个1000px的flex容器来添加一些flex items来说明一下Flex Items的应用准则:

container {
display: flex;
width: 1000px;
}
设置宽度(Width)
添加四个200x200像素的items到flex容器中

item {
width: 200px;
height: 200px;
}
因为flex容器有足够多的空间,所以items可以很好的填充在容器内部:

上面的示例就是当flex-basis没有被指定,默认值是flex-basis: auto,也就意味着items以宽度width(200px)为准。
设置一个Flex Basis值
让我们看看当给这些已经设置固定宽度width的items设置一个flex-basis值会发生什么。

item {
width: 30px;
flex-basis: 250px;
}
就像你说看到的,当指定一个flex-basis值的时候,盒子的宽度属性被忽略了,所以我们就不需要指定盒子的宽度width属性了
item {
flex-basis: 250px;
}
items完全填充了flex容器:

因此items的宽度关键在用最终的flex-basis。最佳的方法是只使用flex-basis而不是width或height属性。特别是Safari 10之前的版本的浏览器有一个flexbox bug,在给items应用flex-shrink属性的时候,浏览器会使用height属性而不是flex-basis。
使用max-width来限制flex-basis
min-width和max-width会限制flex-basis值。下面是给flex items设置max-width的结果:

item {
flex-basis: 250px;
max-width: 100px;
}
可以看到即使我们将flex-basis设置为250px,item的宽度还是被限制在了100px。所以在这个示例中最终的flex-basis是100px:

接着试试min-width来看看最终的flex-basis有什么不同:

item {
flex-basis: 100px;
min-width: 250px;
}
可以看到最终item的宽度是250px而不是100px:

Flex-basis到底是什么?
现在我们知道了width属性只是一个当flex-basis没有被设置时的回退选项。min-width和max-width则是flex-basis的下限和上限。那么flex-basis到底是什么呢?
也许你注意到了上面我们所有的示例在将flex items放入flex容器之前都直观地列出了flex items的大小。之所以这么做是因为这就是flex-basis的含义:flex items 在被放进一个flex容器之前的大小。也就是items理想或假设的大小。但是flex-basis不能保证其大小!一旦将items放入flex容器中,flex-basis的值就无法保证了。在上面的示例中,你可以看到flex items完美地填充了容器,那是因为容器的大小正好等于items最终的flex-basis之和。但是如果容器没有足够的空间来容纳或者有多余的空间呢?下面就分别讲解一下这两种情况:
当没有足够空间的时候
比方说我们想要放更多的flex-basis:200px的items到我们的容器:

在items被放进容器之前,每个item会占据200px,所有的items会占据1600px。但是容器只有1000px。当容器没有足够大的空间来存放所有的items的时候,flex items会按照压缩率(shrink rate)被压缩(shrink)其大小来填充容器,这个压缩率就是flex-shrink来设置的,默认情况下每个item的压缩率都是一样的:

当有额外的空间的时候
通常我们会有额外的空间剩余当所有的items都添加进容器后:

item {
flex-basis: 100px;
}
我们可以控制flex items的增长来填充可用的空间,这也就是flex-grow属性的作用。默认值为0,意味着item不会增长。如果将每个item设置flex-grow: 1,那么所有 的item都会等比例的增长来填充剩余的空间:

item {
flex-basis: 100px;
flex-grow: 1;
}
增长和压缩是flexbox中很重要的特性,也让flexbox非常适合应用于响应式UI设计。Flexbox Zombies课程涵盖了flex-shrink和flex-grow更多详细的细节。
Width vs flex-basis
希望现在你明白了width和flex-basis之间的区别,也知道了如何使用min-width和max-width来限制最终的flex-basis。以上这些设置同样适用于height属性,当你将flex-direction设置为column或者column-reverse的时候。如果你想掌握所有的flexbox属性,墙裂推荐免费的Flexbox Zombies课程,通过玩游戏来学习flexbox!
作者:吃素的外星人
链接:https://www.jianshu.com/p/17b1b445ecd4
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
优先级:content –> width –> flex-basis (limted by max|min-width)的更多相关文章
- max(min)-device-width和max(min)-width的区别
在网页自适应设计中,max-device-width和max-width是不可缺少的两大CSS属性,但是可能大家在使用的选择上没有太多讲究,认为用其中一个即可.确实,如果没有特定要求,用任何一个都没有 ...
- Flex Basis与Width的区别
[Flex Basis与Width的区别] Flex Items的应用准则 content –> width –> flex-basis (limted by max|min-width) ...
- Automatic Preferred Max Layout Width is not available on iOS versions prior to
警告:Automatic Preferred Max Layout Width is not available on iOS versions prior to 8.0 如: 找到: : 改动为:
- 6.组函数(avg(),sum(),max(),min(),count())、多行函数,分组数据(group by,求各部门的平均工资),分组过滤(having和where),sql优化
1组函数 avg(),sum(),max(),min(),count()案例: selectavg(sal),sum(sal),max(sal),min(sal),count(sal) from ...
- 从集合中查找最值得方法——max(),min(),nlargest(),nsmallest()
从集合中查找最值得方法有很多,常用的方法有max(),min(),nlargest(),nsmallest()等. 一.max()和min() 1.1 入门用法 直接使用max(),min(),返回可 ...
- day12 max min zip 用法
max min ,查看最大值,最小值 基础玩法 l = [1,2,3,4,5] print(max(l)) print(min(l)) 高端玩法 默认字典的取值是key的比较 age_dic={'al ...
- max,min,Zip函数(十一)
zip函数,拉链,传两个有序的参数,将他们一一对应为元祖形式 max,min比较默认比较一个元素,处理的是可迭代对象,相当于for循环取出每个元素进行比较,注意:不同类型之间不可比较 #!/usr/b ...
- group by与avg(),max(),min(),sum()函数的关系
数据库表: create table pay_report( rdate varchar(8), --日期 region_id varchar(4), --地市 ...
- 关于STL库中的max min swap
嗯... 不得不说c++中的STL库是一个神奇的东西 可以使你的代码显得更加简洁.... 今天就只讲STL中的三个鬼畜: max min swap 具体操作 ...
随机推荐
- linux SSH 登录
1: 远程连接linux server: ssh -p22 root@192.168.XXX.XXX 然后输入密码. 2: 免密码的方式: A: sudo -i B: ssh-keyge ...
- windows服务器入门 初始化数据盘
本人在寒假的时候自行搭建了一个服务器,在此分享一下我的方法.本人服务器的系统为Windows 2012R2 在后面的讲解中中文英文都会有 所以不用在意系统的语言问题 1)第一步 自然就是打开服 ...
- Python中logging在多进程环境下打印日志
因为涉及到进程间互斥与通信问题,因此默认情况下Python中的logging无法在多进程环境下打印日志.但是查询了官方文档可以发现,推荐了一种利用logging.SocketHandler的方案来实现 ...
- 写一个单独的qt模块 -- ongoing
彩阳发的链接: https://wiki.qt.io/Creating_a_new_module_or_tool_for_Qt
- Hbuider APP打包流程
1,下载HBuilder,注册并登陆.首先打开“文件”-“新建”-“移动APP”,输入“应用名称”,“位置”可以根据需要自己选择即可,“选择模板”建议选择空模板: 2,新建完成后, 在项目管理器会 ...
- JWT 身份认证优缺点分析以及常见问题解决方案
本文转载自:JWT 身份认证优缺点分析以及常见问题解决方案 Token 认证的优势 相比于 Session 认证的方式来说,使用 token 进行身份认证主要有下面三个优势: 1.无状态 token ...
- 数位dp踩坑
前言 数位DP是什么?以前总觉得这个概念很高大上,最近闲的没事,学了一下发现确实挺神奇的. 从一道简单题说起 hdu 2089 "不要62" 一个数字,如果包含'4'或者'62', ...
- 在订单服务中使用Hystrix进行熔断设置
使用Hystrix熔断(上) 在一个分布式系统里,一个服务依赖多个服务,可能存在某个服务调用失败, 比如超时.异常等,如何能够保证在一个依赖出问题的情况下,不会导致整体服务失败, ...
- redis用法分析
redis基本介绍 redis也是一个内存非关系型数据库,它拥有memcache在数据存储上的全部优点,而且在memcache的基础上增加了数据持久性功能,redis用rdb和aof两种方式实现数据持 ...
- 嗯 第二道线段树题目 对左右节点和下标有了更深的理解 hdu1556
Color the ball Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...