有 width 不就够了吗，为何还要 flex-basis 呢？

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>
复制代码

1. 等宽列：在 .item 设置 flex-basis: 0 或者 width: 0 都能获得这个效果。

.item {  flex-basis:0; /* 与设置 width: 0 的效果同样 */ flex-grow: 1;}
复制代码

2. 两边固定宽，中间占据剩余空间。

.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。

auto 和 content

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 同时使用时，优先级更高。

参考连接

• flex-basis，MDN
• Flex Basis Property in Flexbox
• What are the differences between flex-basis and width?

（正文完）

---

广告时间（长期有效）

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

（完）