css - Flex 将宽度应用于内容框

Question

当您设置 flex 比率(例如 flex: 1)时，它们将应用于内容框(即不考虑填充)。这会导致一些意想不到的行为，如本例所示:

http://codepen.io/anon/pen/doYBad?editors=100

  #c 
  {
   background: red; width: 300px; height: 40px; 
   display: flex; align-items: stretch; box-sizing: border-box;
  }

  #l {background: blue; flex:1; }
  #r {background: orange; flex:2; }

  #c > * {padding: 20px; box-sizing: border-box; display: block;}

容器为 300px。比例为 2 - 1(右 - 左)。所以左边的框应该是 100 px，但不是因为有 padding。

如何使 flexbox 将宽度应用到整个框而不仅仅是内容框？

请注意，我不能使用宽度属性。

Answer 1

您注意到的行为实际上并非完全出乎意料。

flex-grow 属性用于确定元素应占用的 flex 容器内的可用空间量。这里的关键是可用空间 是在保留任何已知空间之后剩下的空间。

在您的示例中，您具有以下已知属性:

• 容器宽度:300px
• 每个元素的填充:20px(20px * 4 = 80px 总计)
• 要占用的剩余元素:剩余空间的 1/3
• 要占据的正确元素:剩余空间的 2/3

所以计算如下:

300 像素 - 80 像素 = 220 像素

220px 是在两个元素之间分配的剩余空间，左边的元素只得到三分之一，所以:

220px/3 = 73.333333r

因此，左侧元素的总宽度是这个值加上分配给开头的填充:

73.333333r + (20px * 2) = 113.333333r

当您移除填充时，您将在左右框之间得到 100/200 的分割。