Question

当您设置弹性比（例如，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像素，但不是因为有填充。

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

请注意，我无法使用width属性。

Answer 1

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

flex-grow属性用于确定项目应占用的Flex容器内的可用空间量。这里的关键是可用空间是保留任何已知空格后剩余的空间。

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

货柜宽度：300px
每个项目的填充：20px（20px * 4 =总共80px）
要占用的剩余项目：剩余空间的1/3
正确的项目：剩余空间的2/3

所以计算如下：

300px - 80px = 220px

220px是在两个项目之间划分的剩余空间，左侧项目仅占其中的三分之一：

220px / 3 = 73.333333r

因此，左项的总宽度为此值PLUS分配的填充位于开头：

73.333333r +（20px * 2）= 113.333333r

删除填充后，您将在左右框之间进行100/200分割。

Flex将宽度应用于内容框

1 个答案: