[翻译]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的应用准则:


Container
container {
    display: flex;
    width: 1000px;
}

设置宽度(Width)

添加四个200x200像素的items到flex容器中


container-items00
item {
    width: 200px;
    height: 200px;
}

因为flex容器有足够多的空间,所以items可以很好的填充在容器内部:

container-items01

上面的示例就是当flex-basis没有被指定,默认值是flex-basis: auto,也就意味着items以宽度width(200px)为准。

设置一个Flex Basis值

让我们看看当给这些已经设置固定宽度width的items设置一个flex-basis值会发生什么。


container-items02
item {
    width: 30px;
    flex-basis: 250px;
}

就像你说看到的,当指定一个flex-basis值的时候,盒子的宽度属性被忽略了,所以我们就不需要指定盒子的宽度width属性了

item {
    flex-basis: 250px;
}

items完全填充了flex容器:


container-items03

因此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的结果:


container-items04
item {
    flex-basis: 250px;
    max-width: 100px;
}

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


container-items05

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


container-items06
item {
    flex-basis: 100px;
    min-width: 250px;
}

可以看到最终item的宽度是250px而不是100px:


container-items07

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到我们的容器:


container-items08

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


container-items09

当有额外的空间的时候

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


container-items10
item {
    flex-basis: 100px;
}

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


container-items11
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!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,374评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,279评论 0 26
  • 前言 FlexBox是css3的一种新的布局方式,天生为解决布局问题而存在的它,比起传统的布局方式,我们使用Fle...
    zevei阅读 1,360评论 23 3
  • FFC (flex formatting context) Flexbox 布局新定义了格式化上下文,类似 BFC...
    林立镇阅读 1,405评论 0 0
  • 在以前页面布局多依赖于table,但table标签太多,于是有了absolute布局,float布局等,但它们小问...
    张歆琳阅读 3,930评论 3 55