简写的 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-basis0%,即基础尺寸为 0;当我们使用 flex:100px 的时候,正常情况就是需要 flex-grow1,也就是尺寸保持向外的弹性。
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,则这个 1flex-grow 属性的值,此时 flex-shrink 属性和 flex-basis 属性的值分别是 10%。注意,这里的 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,则这个 2flex-shrink 属性的值,此时 flex-basis 属性计算值是 0%,并非默认值 auto
  • 如果第二个值是长度值,例如 flex:1 100px,则这个 100pxflex-basis 属性值。

(3) 如果 flex 属性值有 3 个值,则长度值flex-basis 属性值,其余两个数值分别为 flex-growflex-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:0flex:initial 的区别

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

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

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

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

比较不容易理解的是,如果同时设置了 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