为什么填充扩展弹性项？

Question

在下面的代码段中,第一行有两个div flex-grow: 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>

Answer 1

计算在规范中定义.

带有填充的弹性项目大小,flex-grow由弹性箱规范中的计算确定.

这些计算类似于使用填充和填充的弹性项目的大小flex-shrink.

坦率地说,数学是非常技术性的,并不是世界上最容易理解的东西.

但是如果你想进入它,这里有详细信息:

• 9.7.解决弹性长度
• 如何在填充和边框中使用flex-shrink因子？

例子

以下是希望使行为更加清晰的示例.

注意: 请记住,这flex-grow不是直接确定弹性项目长度的工具.它是一种在弹性项目中分配容器空间的工具.该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>

jsFiddle演示

例#2

在柔性容器中,在那里你有box-sizing: border-box,而且width还是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>

jsFiddle演示

例#3

在一个弹性容器中,你拥有box-sizing: border-box和flex-grow,它似乎box-sizing不起作用......

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>

jsFiddle演示

但那不是真的正确......

例#4

flex-grow根据Flex容器中的可用空间扩展Flex项的宽度.换句话说,它忽略了填充(和边框).

但是,如果您只是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-shrink, 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>

jsFiddle演示

Answer 2

据我所知，这是正确的行为。

flex:1当然，是以下形式的简写：

flex-grow:1;
flex-shrink:1;
flex-basis:0

这允许 div 在必要时增长，在本例中确实如此。如果弹性项目实际上不同，它不会自动将它们保持为相同的大小。