第 154 题：弹性盒子中 flex: 0 1 auto 表示什么意思
yygmind opened this issue · 10 comments
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。
1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
3.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
.item {
flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配
flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配
flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走
}
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值。
flex :flex-group flex-shirk flex-basis
①.flex-group 剩余空间索取
默认值为0，不索取
eg:父元素400，子元素A为100px，B为200px.则剩余空间为100
此时A的flex-group为1，B为2，
则A=100px+100_1/3; B=200px+100_2/3
②.flex-shrik 子元素总宽度大于复制元素如何缩小
父400px,A 200px B 300px
AB总宽度超出父元素100px;
如果A不减少，则flex-shink ：0,B减少；
②,flex-basis
该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。
flex-grow拼写错了
flex :flex-group flex-shirk flex-basis
①.flex-group 剩余空间索取
默认值为0，不索取
eg:父元素400，子元素Aflex :flex-group flex-shirk flex-basis
①.flex-group 剩余空间索取
默认值为0，不索取
eg:父元素400，子元素A为100px，B为200px.则剩余空间为100
此时A的flex-group为1，B为2，
则A=100px+100_1/3; B=200px+100_2/3
②.flex-shrik 子元素总宽度大于复制元素如何缩小
父400px,A 200px B 300px
AB总宽度超出父元素100px;
如果A不减少，则flex-shink ：0,B减少；
②,flex-basis
该属性用来设置元素的宽度，当然width也可以用来设置元素的宽度，如果设置了width和flex-basis，那么flex-basis会覆盖width值。flex-grow拼写错了
一看我就是不认真
复制粘贴当自己拼写的吗？
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-group: 指定容器剩余空间多余时的分配规则，默认是0（多余的空间不分配）
- flex-shrink：指定容器剩余空间不足时的分配规则，默认是1（空间不足时要分配）
- flex-basis：指定固定的分配数量，默认是auto
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;
关于主轴宽度不够 300px 是如何计算的，求解