使用 flexbox 时将 box-sizing 重置为 border-box 是否相关？

Question

我是一名交互设计师，偶尔会涉足一些前端实验，但我绝对不是开发人员，所以很抱歉这个问题措辞不当或不相关。我最近很享受按照 this article 中的建议重置盒子大小，但也打算开始使用 flexbox 属性。正如我所读到的，flexbox 是一种完全不同的盒子模型，我想知道它是否使重置盒子大小的概念变得无关紧要或一个坏主意？

Answer 1

不完全...两者并没有真正的关系。

flexbox 仍然使用值，并且您希望这些值是他们所说的意思。

您可能有一个 div 和一个 max/min width，它有 padding，并且您希望该值是正确的。

flexbox 并不意味着 box-sizing 是自动的或不是一个因素。

From the Spec

For all other values, flex-basis is resolved the same way as width in horizontal writing modes [CSS21]: percentage values of flex-basis are resolved against the flex item’s containing block, i.e. its flex container, and if that containing block’s size is indefinite, the result is the same as a main size of auto. Similarly, flex-basis determines the size of the content box, unless otherwise specified such as by box-sizing

参见：

.wrap {
  display: flex;
  margin-bottom: 10px;
}
.content {
  background: red;
  height: 75px;
  flex: 0 0 150px; /* max-width 150px */
  padding: 0 25px;
}
.boxy .content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div class="wrap boxy">
  <div class="content"></div>
</div>

<div class="wrap">
  <div class="content"></div>
</div>

使用 flexbox 时将 box-sizing 重置为 border-box 是否相关？

Is resetting box-sizing to border-box relevant when using flexbox?

css

frontend

flexbox