We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
There was an error while loading. Please reload this page.
三个参数分别对应的是 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 :flex-group flex-shirk flex-basis
①.flex-group 剩余空间索取
此时A的flex-group为1，B为2，
则A=100px+100_1/3; B=200px+100_2/3
②.flex-shrik 子元素总宽度大于复制元素如何缩小
如果A不减少，则flex-shink ：0,B减少；
flex-grow拼写错了
flex :flex-group flex-shirk flex-basis ①.flex-group 剩余空间索取 默认值为0，不索取 eg:父元素400，子元素A 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，子元素A
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: 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 常用属性介绍 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;
@qianlongo
关于主轴宽度不够 300px 是如何计算的，求解
Activity
buerwei commentedon May 12, 2020
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为0 1 auto。
1.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
2.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
3.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
lixuguang commentedon May 12, 2020
.item {
flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配
flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配
flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走
}
zrx1118 commentedon May 12, 2020
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值。
wuxiii commentedon May 12, 2020
flex-grow拼写错了
xwjla commentedon May 13, 2020
复制粘贴当自己拼写的吗？
qianlongo commentedon May 24, 2020
flex: 0 1 auto的含义大家都说的很清楚，查了一些资料补充一下以下两种情况的子元素在分配主轴空间上的计算方式
主轴空间宽度有剩余，子元素最终的宽度？
主轴空间宽度不足，子元素最终的宽度？
zengpeng123 commentedon Jul 1, 2020
lidong081824 commentedon Sep 2, 2020
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;
扩张比会简单一点：总宽-子集宽之和直接按扩张比进行计算；
ietwangwei commentedon Jul 16, 2021
flex-grow: 0;
flex-shrink: 1;
flex-basic: auto;
Yangfan2016 commentedon Aug 15, 2022
@qianlongo
关于主轴宽度不够 300px 是如何计算的，求解