带有 box-sizing 的 flex-box：border-box 不起作用，因为边框（显然）[重复]答案

【问题标题】：flex-box with box-sizing: border-box not working because border (apparently) [duplicate]带有 box-sizing 的 flex-box：border-box 不起作用，因为边框（显然）[重复]
【发布时间】：2018-01-18 08:36:41
【问题描述】：

我正在尝试使用 flexbox 从头开始构建表格，并且我想使用属性 flex 实现 rowspan 和 colspan。但它不起作用，我是因为边框，即使设置了border-box

我的结果是：

/* Styles go here */

*{
  box-sizing: border-box;
}

.table{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.table > caption{
  align-self: flex-end;
}
.row, .header{
  display: flex;
  flex-direction: row;
  width: 100%;
  flex: 1;
}

.header{
  font-weight: bold;

}

.header > .col{
  justify-content: center;
}

.col{
  display: flex;
  width: 100%;
  border: 1px solid black;
  flex: 1;
}

.row > .col{
  justify-content: flex-end;
}

    <div class="table">
  <caption>Im a title</caption>
  <div class="header">
    <div class="col">Number 1</div>
    <div class="col">Number 2</div>
    <div class="col">Number 3</div>
  </div>
  <div class="row">
    <div class="col" style="flex:2;">1</div>
    <div class="col" style="flex:0.5;">2</div>
    <div class="col" style="flex:0.5;">3</div>
  </div>

  <div class="row">
    <div class="col">Yep should be</div>
    <div class="col">5</div>
    <div class="col">6</div>
  </div>

  <div class="row">
    <div class="col">7</div>
    <div class="col">this is a different</div>
    <div class="col">9</div>
  </div>
</div>

A plnkr to my problem

我看到了这个问题flex-box box-sizing: border-box not working 和this one（和许多其他人），但它们并不是我的具体问题。（以防万一这是角度上的一个组件，但可以）。

【问题讨论】：

为什么不用table标签？
@YoungKyunJin 我有角度风格的问题，stackoverflow.com/questions/45595659/…
1

2

3
@Vega 不应该是那样的。如果 item1 具有 flex:2，而其他 item1 具有 flex:1。它应该按比例分配。对于特定情况，我也可以破解，但如果边界发生变化。黑客将打破。所以我尝试了borderbox，但似乎不起作用。至少在 chrome 中。
问题是你使用的是flex-grow。您需要使用flex-basis。 plnkr.co/edit/okYkmEbGoRSDrwLXs3QR?p=preview

标签： css angular flexbox box-sizing

【解决方案1】：

.col{
 ...
       margin: 0 -2px -2px 0;
...
}

其中 2px 是边框宽度的两倍。 Plunker

【讨论】：