第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思？
flex:0 1 auto 指的是 flex-grow、flex-shrink、flex-basis 3 个属性结合在一起的缩写形式。
- flex-grow：定义了项目的放大比例，默认为 0，即使存在剩余空间，也不放大。
- flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
- flex-basis：定义在分配多余空间之前，项目占据的主轴空间。
盒子的宽度先看 flex-basis 给定的值，比如 flex:1 1 0%，即便给定的盒子 width 为 100px，也会因为 0%，而在盒子中的值实际占据宽度为 0。flex：1 1 auto 的话，盒子的宽度就会和高度一致。然后看盒子是否有剩余空间，再重新分配空间，如果有多余的空间，就看 flex-grow 的值，把容器里面的盒子的所有的flex-grow加在一起，用盒子剩余大小除以 flex-grow 的总数，就是1份的大小，看每个盒子的 flex-grow 的值，乘上每一份的值，加上在 flex-basis 属性重新变更的宽度，就是盒子的实际宽度，缩小反之。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
flex 常用属性介绍
1.flex-grow: 扩张比率，只有当子集宽度合计小于父级宽度(需要子集扩张)时才看这个值；
2.flex-shrink:收缩比率，只有当子集宽度合计大于父级宽度(需要子集收缩)时才看这个值；
3.flex-base:项目长度，可以自动计算，继承，和设置具体的长度值；
举例：求left right的宽度
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 300px;
background: #EAEAEA;
}
.right {
flex: 2 1 400px;
background: white;
}
分析：
1.先确定看flex-grow还是flex-shrink:父级宽度(600)<子集宽度之和(300+400=700)因此子集需要收缩，收缩比2:1
2.收缩总量:700-600=100；权重计算：2300+1400=1000，left最终宽：300-1002300/1000=240；right最终宽度：400-1002300/1000=360;
扩张比会简单一点：总宽-子集宽之和直接按扩张比进行计算；
flex-grow: 0;
flex-shrink: 1;
flex-basic: auto;
flex: 0 1 auto的含义大家都说的很清楚，查了一些资料补充一下以下两种情况的子元素在分配主轴空间上的计算方式
主轴空间宽度有剩余，子元素最终的宽度？
<div class="parent"> <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div> </div> <style type="text/css"> .parent { display: flex; width: 600px; } .parent > div { height: 100px; } .item-1 { width: 140px; flex: 2 1 0%; background: blue; } .item-2 { width: 100px; flex: 2 1 auto; background: darkblue; } .item-3 { flex: 1 1 200px; background: lightblue; } </style>主轴空间宽度不足，子元素最终的宽度？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> <style> * { padding: 0; margin: 0; } .container { width: 600px; height: 300px; display: flex; } .left { /* 285 */ flex: 1 2 500px; background: red; } .right { /* 314 */ flex: 2 1 400px; background: blue; } </style> </body> 1. 总权重 500 * 2 + 400 * 1 = 1400 <br /> 2. 需要缩小的宽度 <br /> left (500 * 2 / 1400) * 300 = 214.285714286<br /> right (400 * 1 / 1400) * 300 = 85.714285714<br /> 3. 最后的宽度<br /> left 500 - 214.285714286 = 285.714285714<br /> right 400 - 85.714285714 = 314.285714286 <br /> </html>复制粘贴当自己拼写的吗？
flex-grow拼写错了
flex :flex-grow flex-shrink flex-basis
①.flex-grow 剩余空间索取
默认值为0，不索取
eg:父元素400，子元素A为100px，B为200px.则剩余空间为100
此时A的flex-grow 为1，B为2，
则A=100px+1001/3; B=200px+1002/3
②.flex-shrink 子元素总宽度大于复制元素如何缩小
父400px,A 200px B 300px
AB总宽度超出父元素100px;
如果A不减少，则flex-shrink ：0,B减少；
②,flex-basis
该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。
.item {
flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配
flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配
flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走
}
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。
1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
3.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。