Flex 布局中，我们知道 flex-basis 属性是用来设置 Flex 项目的初始主轴尺寸（initial main size）的。

一样的效果

但通过实践发现，在 Flex 项目上使用 flex-basis 和 width 属性时，得到的效果是一样的。

以下面的结构为例：

<div style="display: flex;">
	<div class="item">Item 1</div>
	<div class="item">Item 2 的内容有点多</div>
	<div class="item">Item 3</div>
</div>

.item {  flex-basis:0; /* 与设置 width: 0 的效果一样 */ flex-grow: 1;}

.item:first-child, .item:last-child { flex-basis: 100px; /* 与设置 width: 100px 的效果一样 */ }
.item:nth-child(2) { flex-grow: 1;}

通过观察能够发现：两种布局方式下，不管在 Flex 项目上使用 flex-basis 还是 width，得到的效果都是一样的。

区别何在？

事实也是这样子，问题来了：有 width 不就够了吗？为什么还要多设计一个 flex-basis 属性呢？

其实，还是有区别的：

注意：为了方便描述，假设当前文档是按照从左到右，从上到下的方式排版的，即处在水平书写模式（horizontal writing modes）下。

主轴尺寸：首先要明确的是，flex-basis 设置的是 Flex 项目的主轴尺寸，当 flex-direction 取值 column 或 column-reverse 时，flex-basis 表示的就不是 width，而是 height 了。
支持简写：通过 flex 简写属性，我们可以同时设置 flex-grow、flex-shrink、flex-basis 这三个属性，如果使用 width，就不得不分开设置了。
使用范围：flex-basis 只会在 Flex 项目上生效，对定位了的 Flex 项目还不起作用。
优先级别：当在 Flex 项目上同时设置 flex-basis 和 width/height 时，生效的会是 flex-basis。

flex-basis 的默认值是 auto，与另一个可取值 content 的差别微乎其微。

当 flex-basis: auto 时，会查看当前 Flex 项目是否设置 width/height 属性。没有设置的话，就会回退到 flex-basis: content。

flex-basis: content 的意思是 automatic sizing，意思 Flex 项目的尺寸根据当前可用空间发生变化的，不超过 max-width/height，不小于 min-width/height。

即 flex-basis: content 的效果等于 flex-basis: auto; width/height: auto;，在我看来，这个值没有似乎任何实际意义，有点挺鸡肋。

在水平书写模式下，flex-basis 解析效果与 width 完全相同（前提是 flex-basis 的值不等于 auto 或 content）。
flex-basis 只对（非绝对定位的）Flex 项目 生效
flex-basis 设置的是 主轴尺寸，根据 flex-direction 的取值不同，可能表示 width，也可能表示 height
flex-basis 支持简写属性 flex
flex-basis 与 width/height 同时使用时，优先级更高

（正文完）

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。现在猫舍里养的都是布偶猫。如果你也是个爱猫人士并且有需要的话，不妨扫一扫她的【闲鱼】二维码。不买也不要紧，看看也行。

（完）