关于前端:简写的-flex1-具体简写了些什么

前几天写 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 关键字属性值根本成果示意实例页面

简略来说：

• 如果想放弃元素 依照其宽度平铺换行 的话，能够应用 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