简写的 flex:1 具体简写了些什么？

前几天写 flex 容器宽度被内容撑开的问题 查文章的时候，看到了一篇 flex:1 到底代表什么?，确实很多时候只是知道 flex:1 的作用，并不清楚他具体代表了什么。
和那篇帖子一样，我原先理解的也是 flex:1 应该是 flex:1 1 auto 的简写。因为设置了 flex:1 之后就可以让容器扩张了。既然 flex 的默认值是 0 1 auto 那么理所当然的就这样认为了。

看完了这个帖子之后发现其实并不是这样。
简写的 flex:1 其实是 flex:1 1 0%，其中的 flex-basis 的值从默认值变成了 0% ，但是文章并没有说明为什么会这样。

确实这个东西不值得深入研究为什么，只需要知道和理解就可以了。
但，正好昨天在翻《CSS新世界》的时候看到了这部分内容！

为何 flex 属性会有这样与众不同的行为呢？按照CSS规范的说法，这样设计的目的是为了让 flex 属性的表现更符合我们日常开发需要的效果。意思就是，当我们使用 flex:1 的时候，正常情况就是需要 flex-basis 为 0%，即基础尺寸为 0；当我们使用 flex:100px 的时候，正常情况就是需要 flex-grow 为 1，也就是尺寸保持向外的弹性。
flex 属性站在实用主义的角度对计算值进行了优化， 我认为这是 CSS 规范一种友善的处理，而这种友善在 flex 的关键字属性值中体现的更加明显。
——《CSS新世界》

正如书里说的，真正使用 flex 的时候没有几个人可以记清楚哪个值对应哪一个属性，flex 单值缩写语法的作用就是为了让 flex 属性的作用语义化和表面化。

比如说 flex 的正式语法为：

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

flex: none 很好理解，元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为 flex: 0 0 auto。

我们关注书内的重点说明的 flex 属性的多值语法：

<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>

(1) 如果 flex 的属性值只有 1 个值，则具体规则如下：

• 如果是数值，如 flex:1，则这个 1 为 flex-grow 属性的值，此时 flex-shrink 属性和 flex-basis 属性的值分别是 1 和 0%。注意，这里的 flex-basis 属性是 0%，而不是默认值 auto。
• 如果是长度值，如 flex:100px，则这个 100px 显然为 flex-basis 属性的值，因为 3 个缩写的 CSS 属性中只有 flex-basis 的属性值支持长度值。此时 flex-grow 属性和 flex-shrink 属性的值都是 1，注意，这里的 flex-grow 属性的值是 1，而不是默认值 0。

(2) 如果 flex 的属性值有 2 个值，则第一个值一定是 flex-grow 属性值（因为表示0个或1个的问号 ? 在 flex-shrink 的后面 _{[CSS属性值定义语法可以看这里]}），第二个值根据值的类型不同对应不同的CSS属性，具体规则如下。

• 如果第二个值是数值，例如 flex:1 2，则这个 2 是 flex-shrink 属性的值，此时 flex-basis 属性计算值是 0%，并非默认值 auto。
• 如果第二个值是长度值，例如 flex:1 100px，则这个 100px 为 flex-basis 属性值。

(3) 如果 flex 属性值有 3 个值，则长度值为 flex-basis 属性值，其余两个数值分别为 flex-grow 和 flex-shrink 的属性值。下面两行CSS语法都是合法的，且含义也是一样的：

  /* 下面两行的CSS语句含义是一样的 */
  flex: 1 2 50%;
  flex:50% 1 2;

所以在简写的时候其实对应的计算值是这样的

简写	等同于
flex: initial	flex: 0 1 auto
flex: 0	flex: 0 1 0%
flex: none	flex: 0 0 auto
flex: 1	flex: 1 1 0%
flex: auto	flex: 1 1 auto

具体效果可以查看张大佬随书写的这个例子 🔗 flex关键字属性值基本效果示意实例页面

简单来说：

• 如果想保持元素按照其宽度平铺换行的话，可以使用 flex:initial，比如说不定宽的小标签、小图标列表；
• 如果想保持元素不随容器宽度放大和缩小，可以使用　flex:none 来实现，比如说上一篇文章中的定宽侧边栏；
• 如果想要让各元素之间等比放大和缩小的话，可以使用 flex:1 来实现；
• 如果想要元素根据内容的宽度来占据容器剩余空间或者缩小的话，可以使用 flex:auto 来实现；
• flex:0 暂时没有想到应用场景。

尾声

🎈 问题1：不同的 flex-basis 的值，会对元素造成什么影响？

对比1： flex:0 和 flex:initial 的区别

• 他们都不会扩张，即都不会占据剩余空间。
• flex:0 的元素宽度为 最小内容宽度，缩放时按照 最小内容宽度 占据空间。
• flex:initial 的元素宽度为 最大内容宽度，缩放时按照自身内容的宽度缩小自身宽度。

对比2： flex:1 和 flex:auto 的区别

• 他们都会扩张和缩小，即都会占据剩余空间。
• flex:1 的元素宽度，可视为等分剩余空间，或者各元素之间等比缩小。
• flex:auto 的元素宽度，按照自身内容的宽度进行分配剩余空间，或者缩小自身宽度。

看着有些懵逼的话，可以看如下具体示例:

CodePen Demo

比较不容易理解的是，如果同时设置了 flex-basis 属性的值和 width 属性的值时，具体是哪一个属性来应用。这个我需要再挖一个坑来说明了，因为内容还是比较多的，或者可以直接看 《CSS新世界》 第六章 中的 6.2.12 节。

文档

flex:1 到底代表什么?
《CSS新世界》- 张鑫旭

flex - CSS（层叠样式表） | MDN
flex-grow - CSS（层叠样式表） | MDN
flex-basis - CSS（层叠样式表） | MDN
CSS Flexible Box Layout Module Level 1

CSS属性值定义语法 - CSS（层叠样式表） | MDN