前几天写 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