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

【问题标题】：Is resetting box-sizing to border-box relevant when using flexbox?使用 flexbox 时将 box-sizing 重置为 border-box 是否相关？
【发布时间】：2015-08-14 10:41:29
【问题描述】：

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

【问题讨论】：

标签： css frontend flexbox

【解决方案1】：

不是真的……两者并没有真正的关系。

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

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

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

From the Spec

对于所有其他值，flex-basis 的解析方式与水平书写模式 [CSS21] 中的宽度相同：flex-basis 的百分比值根据 flex 项目的包含块（即其 flex 容器）解析，如果包含块的大小是不确定的，结果与 auto 的主要大小相同。类似地，flex-basis 确定内容框的大小，除非另有规定，例如通过 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>

【讨论】：

好的，非常感谢 :) 出于某种原因，我认为如果它是一种使用盒子模型的新方法，它可能还提供了一种使默认盒子大小不那么奇怪的方法！
所以它们有冲突吗？即 box-sizing 会导致 flexbox 出现问题吗？这似乎是规范中的最后一句话所暗示的
我没有任何冲突，但我不这么认为。可能值得使用 Google。