Flexbox项目宽度受填充的影响

Question

见http://jsfiddle.net/56qwuz6o/3/:

<div style="display:flex">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
</div>

div div {
    flex: 1 1 0;
    border:1px solid black;
    box-sizing: border-box;
}

#a {
    padding-right: 50px;
}

当我在flex项目(#a)上设置填充时,其宽度(在border-box某种意义上)会受到影响.如何使其计算的宽度忽略填充？即.我希望我的每个盒子占据文档宽度的33%.

编辑: 感谢您的答案到目前为止.但实际上,我实际上在行中有更多具有固定宽度的盒子:即.在http://jsfiddle.net/56qwuz6o/7/,我想#a,#b并且#c所有人都有相同的宽度.

<div style="display:flex; width: 400px">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
</div>

div div {
    flex: 1 1 33%;
    border:1px solid black;
    box-sizing: border-box;
}

#a {
    padding-right: 100px;
}

#d {
    flex-basis: 200px;
    width: 200px;
}

Answer 1

正确的`flex:声明似乎有效.

div div {

  flex: 0 0 33%; 
  /* don't grow, don't shrink, be 33% wide */
  /* flex:1 0 33% works too */
  
  border: 1px solid black;
  box-sizing: border-box;
  }

#a {

  padding-right: 100px;

}

<div style="display:flex">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
</div>

Answer 2

您拥有的flex-basis: 33.33%一个选项是设置或相对于您拥有的孩子数量的数字.我不确定是否有办法动态地做到这一点.

Answer 3

作为问题的更广泛的答案：在剩余空间在弹性盒内划分之前，所有 , , 似乎都是可用总宽度的修复padding扣除border。margin因此，具有更多填充的盒子实际上将获得更多空间。最好用两个并列的 Flex 进行演示，其中一个具有双柱：

\n

（表格应该是这样的。不好的事情应用在\xe2\x86\x93下面）

\n

\n

\xe2\x86\x92 Codepen。

\n

section\n  display: flex\n  width: 90%\n\n  div   \n    flex: 1 1 100%\n    background: #aca\n    // good to illustrate boundaries, since it has no width effect\xe2\x80\xa6\n    box-shadow: inset 0 2px 6px rgba(black, .4)\n    \n  .double\n    flex: 2 1 200%\n

\n

注意事项：

\n

auto因为 flex-basis （第三个flex:参数）不好，因为它查看实际内容。您不会因内容量而改变布局。（比较：table-layout: auto）。跟去吧100%。（即使这加起来达到了百分之几百。）

\n

以下所有情况都会破坏上面的网格对齐方式：

\n

border: 8px solid orange\npadding-left: 8px\nmargin-left: 8px\n  \n

\n

不，这两种价值都box-sizing无助于解决这个问题。

\n

\xe2\x86\x92 在给定网格中填充弹性框的最佳方法是内部标签（即具有全宽度和填充的标签）。

\n