柔性基础和盒子大小

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

很明显，两行中的列不排成一列：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

同样，如果删除填充，对齐问题也会得到修复。

＆＃13;

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

flex-basis，flex-shrink，padding和border-box相互作用以建立框尺寸涉及一些相对复杂的计算。这里解释了它们：

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

该问题的简单解决方案是：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在flex-grow: 1简写中定义flex后，flex-basis无需100％。每个项目将在线路上获得相等的可用空间份额。但是，flex-basis必须至少足以吸收来自padding的{​​{1}}和border（在本例中为7px）。这些列现在跨行对齐。