前言
之前面试被问到如下问题：
flex: 1 0 auto;
你知道它是什么意思么？虽然知道是有关伸缩的几个属性占位，但因为平时只写 flex: 1，一直没关注过这个语法糖其他表达式有什么规则，只要无奈回答：不知道。
这不是个八股文，网上查查便知道，我觉得不应该发生在一个 web 开发的“老人”身上。如果你也不太了解的话，就随着下面的代码示例再复习一遍。
先了解下 flex 有哪几种写法：
flex: none /* value 'none' case */ flex: <'flex-grow'> /* One value syntax, variation 1 */ flex: <'flex-basis'> /* One value syntax, variation 2 */ flex: <'flex-grow'> <'flex-basis'> /* Two values syntax, variation 1 */ flex: <'flex-grow'> <'flex-shrink'> /* Two values syntax, variation 2 */ flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'> /* Three values syntax */ flex: inherit
flex 语法糖中出现了 flex-grow，flex-shrink，flex-basis 三个属性，他们具体什么用呢？
flex-grow
它指定了 flex 容器中剩余空间的多少应该分配给项目（flex 增长系数），默认为 0（无效）
先来看张动图：
flex-grow 0 和 1 区别
代码如下（下面所有示例将基于此做略微改动）：
<!-- html --> <div class="flex-content"> <div class="flex-item">1</div> <div class="flex-item" num="2">2</div> <div class="flex-item">1</div> </div>
/* 父级容器 */ .flex-content { display: flex; justify-content: space-around; width: 800px; }
/* 子元素 */ .flex-content .flex-item { width: 200px; height: 100px; line-height: 100px; text-align: center; background-color: #ffa940; border: 1px solid #000; border-radius: 10px; color: #fff; box-sizing: border-box; } .flex-content .flex-item { } /* 特别样式 */ .flex-content .flex-item[num="2"] { flex-grow: 1; }
能看到随着 flex-grow 改变（0 or 1），中间元素从 200px 到填充整个区域做着切换。
TLDR：弹性盒子内（display: flex），所有子元素（项目 item）的宽度总和不超过父级宽度的话，剩下的空间将被 flex-grow 修饰的元素按照一个规则进行增长。
这个就当热身，下面正式开始了。
不同 width 下的变化
父级宽度（600px）= 子元素宽度之和：
.flex-content { width: 600px; } .flex-content .flex-item { flex-grow: 1; }
每个子元素将保持不变，因为没有多余空间供元素增长，所以即使设置了 flex-grow 也没效果。
父子宽度一致
父级宽度（800px）> 子元素宽度之和：
每个元素的增长率为 1/(1+1+1)，多余空间为：800-200*3=200。
所以每个元素最终宽度为：200+200*1/3 = 266.66
.flex-content { width: 800px; } .flex-content .flex-item { flex-grow: 1; }
父宽度大于子，有剩余空间
父级宽度（400px）< 子元素宽度之和：
由于子元素宽度总和大于父级，所以原本的宽度 200px 将失效，子元素宽度将为：400/3 = 133.33（默认flex-shrink为1）
父宽度小于子，无剩余空间
只有其中一元素设置了 flex-grow
只有其中一元素设置了 flex-grow
.flex-content { width: 800px; } .flex-content .flex-item { /* flex-grow: 1; */ } .flex-content .flex-item[num="2"] { flex-grow: 1; }
第 1 个和第 2 个元素保持原 200px（默认不增长），多余空间为：800-200*2 = 400，中间元素将增长到 400px
只设置单个元素的 flex-grow
当 flex-grow 值为小数：
为小数时，分母默认为 1，即此时增长率为 0.5/1，中间元素将增长到：200+0.5/1*200=300
只设置单个元素的 flex-grow，值为小数
.flex-content .flex-item[num="2"] { flex-grow: 0.5; }
flex-shrink
指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认值为 1。
在不同 width 下的变化
父级宽度（600px）= 子元素宽度之和（600px）：
两者宽度相同，不做收缩处理。
.flex-content { display: flex; justify-content: space-around; width: 600px; } .flex-content .flex-item { flex-shrink: 1; }
父子宽度一致
父级宽度（500px）< 子元素宽度之和（600px）：
.flex-content { display: flex; justify-content: space-around; width: 500px; } .flex-content .flex-item { flex-shrink: 1; }
缺少空间为 100px，每个元素收缩率为：1/(1*3)，即收缩长度为：200-100*1/(1*3) = 166.67
父宽度小于子
只有其中一元素设置了 flex-shrink
flex-shrink 为整数时：
缺少空间为：200*3 - 500 = 100，中间元素将收缩到 200-100*(2/4)=150，第 1 个和第 2 个元素为 200-100*(1/4)=175
.flex-content .flex-item[num="2"] { flex-shrink: 2; }
flex-shrink 计算规则
flex-shrink 为小数时：
中间元素将收缩到 200-100*0.5/(2+.5)=180
.flex-content .flex-item { flex-shrink: 0.5; }
flex-shrink 为小数
flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
上面的例子中子元素都以 width 来初始化他们的宽度，但在 flex 布局中，还是强烈建议使用 flex-basis，一方面 flex-basis 的优先级高于 width，另一方面避免两者混用在不同浏览器展示形态的不同。
flex-basis 优先级高于 width
flex-basis 设置 100px，width 设置 200px，最终增长的宽度是基于 flex-basis：
注意，当 flex-basis 为 auto 时，则会以 width 设置的值为基数来计算。
三个属性的简写
参照 flex 语法：
flex: none /* value 'none' case */ flex: <'flex-grow'> /* One value syntax, variation 1 */ flex: <'flex-basis'> /* One value syntax, variation 2 */ flex: <'flex-grow'> <'flex-basis'> /* Two values syntax, variation 1 */ flex: <'flex-grow'> <'flex-shrink'> /* Two values syntax, variation 2 */ flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'> /* Three values syntax */ flex: inherit
所以可以自行感受如下这些简写是什么含义：
可增长
.flex-content { width: 800px; } .flex-content .flex-item { /* 等同于 flex-grow: 1; */ flex: 1; }
语法糖示例
设置基础宽度
.flex-content { width: 600px; } .flex-content .flex-item { /* 等同于 flex-basis:200px */ flex: 200px; }
语法糖示例
可增长+设置基础宽度
.flex-content { width: 800px; } .flex-content .flex-item { /* 等同于 */ /* flex-grow: 1; */ /* flex-basis:200px; */ flex: 1 200px; }
语法糖示例
可增长+可缩小
.flex-content { width: 500px; } .flex-content .flex-item { /* 等同于 */ /* flex-basis: 200px; */ /* flex-grow: 1; */ /* flex-shrink:1; */ flex: 1 1 200px; }
#前端开发##CSS##flex#
