优先级：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

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！

作者：吃素的外星人
链接：https://www.jianshu.com/p/17b1b445ecd4
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。