根据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 …