flex-basis 和 box-sizing

Question

根据flex-basis MDN documentation flex-basis 属性计算与内容框相关的弹性项目的大小，除非box-sizing CSS 属性定义了不同的选项。但是我在当前的 Chrome 和 IE11 中都没有得到想要的结果。

我写了两个例子：

.horizontal-layout {
  display: flex;
  flex-direction: row;
}
header > span {
  flex: 1 1 100%;
}
header > .button {
  background-color: grey;
}
header > .app-name {
  background-color: orange;
}
header#with-border-padding > span {
  box-sizing: border-box; /* this is not useful at all */
}
header#with-border-padding > .button {
  border: 1px solid black;
  padding-left: 5px;
}

<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

jsfiddle

• 第一个例子是一个<header>，有3个<span>标签，每个标签都有一个flex: 1 1 100%（flex-basis是100%）。因此，每个span 都被赋予了header 的第三部分。
• 第二个示例 与第一个相同，但在这种情况下，第二个span 有一些边框和一些填充。我认为flex-grow 会产生与第一个示例相同的结果，但事实并非如此。然后我看到flex-basis MDN documentation 并明白我必须将box-sizing: border-box; 设置为弹性项目，以便flex-basis 与border-box 相关。但它也没有！ 有人知道为什么吗？

如果有人能澄清第二个示例问题，谢谢。 在我的代码中，您可以轻松地比较两个示例之间<span> 标记的大小。

Answer 1

所以很明显两行的列没有对齐：

.horizontal-layout {
  display: flex;
  flex-direction: row;
}

header > span {
  flex: 1 1 100%;
}

header > .button {
  background-color: grey;
}

header > .app-name {
  background-color: orange;
}

header#with-border-padding > span {
  box-sizing: border-box;
}

header#with-border-padding > .button {
  border: 1px solid black;
  padding-left: 5px;
}

<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

有几种方法可以解决这个问题，它们涉及flex-basis和box-sizing，还有flex-shrink和padding。

例如，如果你禁用flex-shrink，对齐问题就消失了。

.horizontal-layout {
  display: flex;
  flex-direction: row;
}

header > span {
  flex: 1 0 100%; /* adjustment */
}

header > .button {
  background-color: grey;
}

header > .app-name {
  background-color: orange;
}

header#with-border-padding > span {
  box-sizing: border-box;
}

header#with-border-padding > .button {
  border: 1px solid black;
  padding-left: 5px;
}

<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

同样，如果去掉padding，对齐问题也解决了。

.horizontal-layout {
  display: flex;
  flex-direction: row;
}

header > span {
  flex: 1 1 100%;
}

header > .button {
  background-color: grey;
}

header > .app-name {
  background-color: orange;
}

header#with-border-padding > span {
  box-sizing: border-box;
}

header#with-border-padding > .button {
  border: 1px solid black;
  /* padding-left: 5px; */  /* adjustment */
}

<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

flex-basis、flex-shrink、padding 和border-box 交互以确定盒子大小的方式涉及一些相对复杂的计算。它们在这里解释：

• How does flex-shrink factor in padding and border-box?

解决问题的一个简单方法是：

header > span { flex: 1 0 7px; }

.horizontal-layout {
  display: flex;
  flex-direction: row;
}

header > span {
  flex: 1 0 7px; /* adjustment */
}

header > .button {
  background-color: grey;
}

header > .app-name {
  background-color: orange;
}

header#with-border-padding > span {
  box-sizing: border-box;
}

header#with-border-padding > .button {
  border: 1px solid black;
  padding-left: 5px;
}

<header class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

<header id="with-border-padding" class="horizontal-layout">
  <span class="button">A</span>
  <span class="app-name">B</span>
  <span class="button">C</span>
</header>

在flex 简写中定义flex-grow: 1 后，flex-basis 无需为 100%。每个项目将在线路上获得同等份额的可用空间。然而，flex-basis 至少需要足够大以吸收来自box-sizing: border-box 的padding 和border（在本例中为7px）。列现在跨行对齐。