Flex Basis与Width的区别
最近在学习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的应用准则:
![](http://upload-images.jianshu.io/upload_images/2560620-9baa4ee81c09ccd7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
container {display: flex;width: 1000px; }
设置宽度(Width)
添加四个200x200像素的items到flex容器中
![](http://upload-images.jianshu.io/upload_images/2560620-bc504e6eabd9f071.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
item {width: 200px;height: 200px; }
因为flex容器有足够多的空间,所以items可以很好的填充在容器内部:
![](http://upload-images.jianshu.io/upload_images/2560620-640d336c73eeac04.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
上面的示例就是当flex-basis没有被指定,默认值是flex-basis: auto,也就意味着items以宽度width(200px)为准。
设置一个Flex Basis值
让我们看看当给这些已经设置固定宽度width的items设置一个flex-basis值会发生什么。
![](http://upload-images.jianshu.io/upload_images/2560620-6da2aaaaf72cf9ee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
item {width: 30px;flex-basis: 250px; }
就像你说看到的,当指定一个flex-basis值的时候,盒子的宽度属性被忽略了,所以我们就不需要指定盒子的宽度width属性了
item {flex-basis: 250px;
}
items完全填充了flex容器:
![](http://upload-images.jianshu.io/upload_images/2560620-4cfbd9274ada24f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
因此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的结果:
![](http://upload-images.jianshu.io/upload_images/2560620-df77abeed4faea1e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
item {flex-basis: 250px;max-width: 100px; }
可以看到即使我们将flex-basis设置为250px,item的宽度还是被限制在了100px。所以在这个示例中最终的flex-basis是100px:
![](http://upload-images.jianshu.io/upload_images/2560620-48e2b1856435602e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
接着试试min-width来看看最终的flex-basis有什么不同:
![](http://upload-images.jianshu.io/upload_images/2560620-42971db5ab2af657.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
item {flex-basis: 100px;min-width: 250px; }
可以看到最终item的宽度是250px而不是100px:
![](http://upload-images.jianshu.io/upload_images/2560620-12a00a0c77131588.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
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到我们的容器:
![](http://upload-images.jianshu.io/upload_images/2560620-df43e8c696de1f83.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
在items被放进容器之前,每个item会占据200px,所有的items会占据1600px。但是容器只有1000px。当容器没有足够大的空间来存放所有的items的时候,flex items会按照压缩率(shrink rate)被压缩(shrink)其大小来填充容器,这个压缩率就是flex-shrink来设置的,默认情况下每个item的压缩率都是一样的:
![](http://upload-images.jianshu.io/upload_images/2560620-4b480acdc4a9a3bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
当有额外的空间的时候
通常我们会有额外的空间剩余当所有的items都添加进容器后:
![](http://upload-images.jianshu.io/upload_images/2560620-2d25f020d86197eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
item {flex-basis: 100px;
}
我们可以控制flex items的增长来填充可用的空间,这也就是flex-grow属性的作用。默认值为0,意味着item不会增长。如果将每个item设置flex-grow: 1,那么所有 的item都会等比例的增长来填充剩余的空间:
![](http://upload-images.jianshu.io/upload_images/2560620-70521f1561cc7cc7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
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.cnblogs.com/thinkingthigh/p/10033809.html
Flex Basis与Width的区别相关推荐
- Flex 3 与 Flex 4 beta 之间的区别
Flex 3 与 Flex 4 beta 之间的区别 Flex 4(代码名:Gumbo)beta 发行版在 Flex 3 基础上做出重大改动.Flex 4 beta 引入了一个新的组件和外观架构.但是 ...
- Android:layout_width和Android:width的区别
前言:今天看属性动画时发现当我们对一个Button按钮做动画时是没有效果的(解决办法),代码如下: private void performAnimate(){ObjectAnimator.ofInt ...
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- flutter:RenderFlex children have non-zero flex but incoming width constraints are unbounded.
错误日志如下: ════════ Exception caught by rendering library ═════════════════════════════════════════════ ...
- Scalewidth和width的区别
Scalewidth属性: 当使用图形方法或调整控件位置时,返回或设置对象内部的水平 (ScaleWidth)度量单位. 其语法为: object.ScaleWidth [= value] 为了定 ...
- offsetWidth和width的区别 逻辑中断 delete运算符 。。。。
offsetWidth和width的区别: 1.offsetWidth属性可以返回对象的padding+border+widt属性值之和,style.width返回值就是定义的对象的width属性值. ...
- jQuery.width()和jQuery.css('width')的区别
目录 问题描述 调试 总结和补充 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '1 ...
- flex item的width VS flex-basis
flexbox的子元素flex item的宽度,按照以下规则计算: content>width>flex-basis(limited by max/min-width) flex-basi ...
- FLEX Array和ArrayCollection的区别
当Array的数据发生变化的时候,用它作为数据源的控件不能感知这种变化. 例如:myArray.push("new value"); 这时,如果一个List用它作为dataProv ...
最新文章
- python获取文本光标_python 文件的操作以及调整光标
- 如何选择最佳技术来加速文件传输!
- 一个完整的Web应用程序部署示例
- 【收藏】ArcGIS 10.8 for Desktop 完整安装教程(含win7/8/10 32/64位+下载地址+亲测可用+汉化)
- ITK:计算CovariantVector的范数并将其标准化
- POJ 2263 floyd思想
- 升级AndroidStudio3.4问题汇总
- 使用 FUSE 开发自己的文件系统
- PyTorch中在反向传播前为什么要手动将梯度清零?
- C#将DataGridView中的数据导出为EXCEL
- Java中解决String无法存储大量字符串的问题,解析Base64编码的图片并保存到本地
- 计算机系统文字图片以啥子存在,电脑如何识别图片中文字的字体|电脑通过图片识别字体的方法...
- Ubuntu18网络配置
- AI——六(图层、蒙版)
- 雕虫小技也重要--数据处理中的电子表格技巧
- 一起学Vue自定义组件之拼图小游戏
- 数据分析报告怎么写(三)
- 认识Hyperledger
- 微信公众号开发 - 配置表设计以及接入公众号接口开发
- 为ibus输入法框架制作新世纪五笔码表
热门文章
- 高效地加载图片(一) 高效地加载大图
- login控件设置居中
- [C++对象模型][9]虚继承与虚函数表
- 解决 QT 发送 HTTP 请求时遇到 qt.network.ssl: QSslSocket::connectToHostEncrypted: TLS initialization failed 问题
- SLAM的评价指标、真实值、估计值及误差分析(转)
- Python练习 | Python3中的格式化输入输出之print函数
- 李宏毅机器学习作业1:预测PM2.5(含训练数据)
- 台式计算机配置清单及价格,电脑配置清单及价格
- php发送邮件,标题是乱码,php的mail函数发送UTF-8编码中文邮件时标题乱码怎么办?...
- ab plc编程软件_三菱PLC编程程序PLC的软件编程