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;
}

- exclipy

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>

- Paulie_D

---

谢谢你的回答。它对我提供的示例有效，但我的实际情况有点更加复杂。请查看更新后的问题。 - exclipy

请勿在回答已经给出的问题上进行修改，尤其是如果这些修改会使已经给出的答案无效。请创建一个新的问题，并链接回旧问题。 - Paulie_D

Answer 2

你可以选择设置flex-basis: 33.33%或者一个与你拥有的子元素数量相关的数字。我不确定是否有一种动态实现的方法。

- Dan Gamble

---

这个解决方法是有道理的，但是当使用填充时，flexbox会为元素添加大小，即使您已经指定了 box-sizing: border-box;，这种行为是否属于规范的一部分，还是flexbox中的实现错误？ - Patrick Finnigan

目前的Chrome浏览器（2018年6月）中，无论是哪种box-sizing模式都没有起到帮助作用。 - Frank N

Answer 3

作为一个更广泛的解答：所有的 padding、border 和 margin 都似乎是在剩余空间分配给弹性盒子之前，对可用总宽度进行了固定扣除。因此，具有更多内边距的盒子实际上会获得更多空间。最好用一个双列的弹性盒子演示这个问题，其中一个位于下面：

→ Codepen.

section
  display: flex
  width: 90%

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

注意:

auto作为flex-basis（第三个flex:参数）不好，因为它会查看实际内容。你不希望内容的多少导致布局发生变化（相比之下：table-layout: auto）。使用100%。（即使这样总和可能达到很多百分比。）

以下所有情况都会破坏上述网格对齐：

border: 8px solid orange
padding-left: 8px
margin-left: 8px
  

不，无论是哪个box-sizing的值都无法解决这个问题。

→在给定的网格中填充 flex box 的最佳方法是使用一个内部标签（即具有完整宽度和填充的标签）。

- Frank N

Answer 4

创建Flexbox样式以加快开发过程

<style>
  .flex-row {
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
  }

  .flexSize-1 {
    flex: 1;
    -webkit-flex: 1;
  }
  .flexSize-1 {
    flex: 2;
    -webkit-flex: 2;
  }
</style>

只要每个列的 flex 属性相等，那么每个列在窗口中的大小将会相等。

  <div class="flex-row">
    <div class="flexSize-1">
      <h1 class="page-header">Test</h1>
    </div>
    <div class="flexSize-1">
      <h1 class="page-header">Test</h1>
    </div>
    <div class="flexSize-1">
      <h1 class="page-header">Test</h1>
    </div>
  </div>

如果您想让某一列比另一列更宽，可以给该列添加类名.flexSize-2，这样它的宽度将是.flexSize-1的两倍。

- SuperVeetz

---

他想要一个答案，可以在某些项目具有填充时创建相等的列。这只是每个子元素具有相等样式的相等列。 - Dan Gamble