在下面的代码片段中,第一行有两个带有flex-grow的div：1.正如预期的那样,每个div占用屏幕的50％.
向左侧div添加填充时,情况就不再如此.有人可以解释原因吗？
body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1;
Box-sizing: border-Box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
}
<div> <div id="a"></div> <div id="b"></div> </div> <div> <div id="c"></div> <div id="d"></div> </div>
解决方法
计算在规范中定义.
具有填充和柔性增长的弹性项目的大小由flexbox spec中的计算确定.
这些计算类似于具有填充和柔性收缩的柔性项目的大小.
坦率地说,数学是非常技术性的,并不是世界上最容易理解的东西.
但是如果你想进入它,这里有详细信息：
> 9.7. Resolving Flexible Lengths
> How does flex-shrink factor in padding and border-box?
例子
以下是希望使行为更加清晰的示例.
注意：请记住,flex-grow不是直接确定弹性项目长度的工具.它是一个在flex容器中分配容器空间的工具. flex-basis属性设置弹性项的初始主要大小.如果flex-grow与flex-basis一起使用,问题中的问题就解决了(参见下面的例子#4).
示例#1
在块容器中,您有box-sizing: border-box,代码中的框将均匀呈现,而不管填充.
body > div {
height: 50px;
/* display: flex; */
font-size: 0; /* remove inline block whitespace */
}
body > div > div {
/* flex: 1; */
Box-sizing: border-Box;
height: 50px;
display: inline-block;
width: 50%;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
<div> <div id="a"></div> <div id="b"></div> </div> <div> <div id="c"></div> <div id="d"></div> </div>
例#2
在Flex容器中,您有Box-sizing：border-Box,并且宽度或flex-basis用于计算长度,无论填充如何,框都将均匀呈现.
body > div {
height: 50px;
display: flex;
}
body > div > div {
flex-basis: 50%;
/* width: 50%; this works,as well */
Box-sizing: border-Box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
<div> <div id="a"></div> <div id="b"></div> </div> <div> <div id="c"></div> <div id="d"></div> </div>
例#3
在Flex容器中,你有盒子大小：border-Box和flex-grow,看起来盒子大小不起作用……
body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1;
/* flex-basis: 50%; */
/* width: 50%; this works,as well */
Box-sizing: border-Box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
<div> <div id="a"></div> <div id="b"></div> </div> <div> <div id="c"></div> <div id="d"></div> </div>
但那不是真的正确……
例#4
flex-grow根据Flex容器中的可用空间扩展Flex项的宽度.换句话说,它忽略了填充(and borders).
但是,如果您只是将flex-grow与flex-basis一起指定,则border-Box将起作用：
flex: 1 1 50%; /* flex-grow,flex-shrink,flex-basis */
body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1 1 50%; /* flex-grow,flex-basis */
/* flex-basis: 50%; */
/* width: 50%; this works,as well */
Box-sizing: border-Box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
<div> <div id="a"></div> <div id="b"></div> </div> <div> <div id="c"></div> <div id="d"></div> </div>
