柔性基础和盒子大小

Question

根据flex-basisMDN文档,该flex-basis属性计算与内容框相关的弹性项的大小,除非box-sizingCSS属性定义了不同的选项.但是我在目前的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-basis100%).所以每个人span都得到了第三部分header.
• 第二个例子等于第一个例子,但在这种情况下,第二个例子span有一些边框和一些填充.我认为这flex-grow会产生与第一个例子相同的结果,但事实并非如此.然后我看到了flex-basisMDN文档,并了解到我必须设置box-sizing: border-box;为flex项目,以便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>

同样,如果删除填充,则对齐问题也会得到修复.

.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互动,建立箱尺寸涉及到一些比较复杂的计算.他们在这里解释:

• 如何在填充和边框中使用flex-shrink因子？

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

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-grow: 1中定义的flex简写,也没有必要flex-basis100%.每个项目将在线路上获得相等的可用空间份额.但是,flex-basis需要至少足够吸收padding和border来自box-sizing: border-box(在这种情况下7px).这些列现在跨行对齐.