Question

在下面的代码段中，第一行有两个带flex-grow: 1的div。正如预期的那样，每个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-shrink的弹性项目大小由flexbox spec中的计算确定。

这些计算与使用填充和flex-grow的弹性项目的大小相似。

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

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

实施例

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

注意： 请注意，flex-basis不是直接确定弹性项目长度的工具。它是一种在弹性项目中分配容器空间的工具。 flex-grow属性设置弹性项的初始主要大小。如果flex-basis与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;一起使用，问题中的问题就会得到解决（请参阅下面的示例＃4）。

示例＃1

在阻止容器中，您拥有box-sizing: border-box，无论填充如何，代码中的框都会均匀呈现。

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

box-sizing: border-box

jsFiddle demo

示例＃2

在弹性容器中，您有width，而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;或flex-basis用于计算长度，无论使用哪个方框都会均匀呈现填充。

<div>
  <div id="a"></div>
  <div id="b"></div>
</div>
<div>
  <div id="c"></div>
  <div id="d"></div>
</div>

box-sizing: border-box

jsFiddle demo

示例＃3

在灵活容器中，您有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>

flex-grow

jsFiddle demo

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

示例＃4

flex-grow根据Flex容器中的可用空间展开Flex项的 width 。换句话说，它忽略了填充（and borders）。

但是，如果您只需指定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>

  <item name="selectableItemBackground">@drawable/selectable_item_background</item>

jsFiddle demo

Answer 2

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

flex:1当然是简写：

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

这允许div在必要时增长，在这种情况下，它会增长。如果它们实际上不同，它不会自动将flex-items维持为相同的大小。

为什么填充扩展弹性项？

2 个答案:

计算在规范中定义。

实施例