柔性基础和盒子大小

时间:2016-05-20 18:44:04

标签: html css html5 css3 flexbox

根据flex-basis MDN documentationflex-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-basisborder-box相关联。但它也没有! 任何人都知道为什么?

非常感谢有人可以澄清关于第二个例子的问题。 在我的代码中,您可以轻松地比较两个示例中<span>标记的大小。

1 个答案:

答案 0 :(得分:7)

很明显,两行中的列不排成一列:

enter image description here

&#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-basisbox-sizing,以及flex-shrinkpadding

例如,如果禁用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-basisflex-shrinkpaddingborder-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)。这些列现在跨行对齐。