根据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>
<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>
标记的大小。
答案 0 :(得分:7)
很明显,两行中的列不排成一列:
.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;
有几种方法可以解决此问题,它们涉及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;
}
&#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;
同样,如果删除填充,对齐问题也会得到修复。
.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;
flex-basis
,flex-shrink
,padding
和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;
}
&#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;
在flex-grow: 1
简写中定义flex
后,flex-basis
无需100%。每个项目将在线路上获得相等的可用空间份额。但是,flex-basis
必须至少足以吸收来自padding
的{{1}}和border
(在本例中为7px)。这些列现在跨行对齐。