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

当我在弹性项目（#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：声明似乎有效。

＆＃13;

＆＃13;

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;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您有1个选项是设置flex-basis: 33.33%或相对于您拥有的孩子数量的数字。我不确定是否有办法动态地进行此操作。

Answer 3

创建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>

如果您希望1列比其他列大，请为该列提供类.flexSize-2，它的宽度是.flexSize-1

的两倍

Answer 4

作为问题的更广泛答案：所有padding，border，margin似乎都是固定扣除可用的总宽度，然后在弹性空间中划分剩余空间框。因此，具有更多填充的盒子实际上将获得更多空间。最佳展示了两个彼此下方的柔性，一个带有双列：

（表应该是。下面的坏事applio↓）

→ 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为基础（第3个flex:参数）不好，因为它会查看实际内容。您没有足够的内容使您的布局发生变化。 （比较：table-layout: auto）。使用100%。 （即使总共增加了百分之百。）

以下所有内容都会破坏网格对齐：

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

不，box-sizing的任何值都不会对此有所帮助。

→在给定网格中填充弹性框的最佳方法是内部标记（即具有全宽和填充的标记）。