柔性基础和盒子大小 [英] flex-basis and box-sizing
问题描述
根据
.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 = 横向布局> < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span>< / header>< header id =with-border-paddingclass =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 和填充。
例如，如果禁用 flex-shrink ，则对齐问题就会消失。
.horizontal-layout {display：flex; flex-direction：row;} header> span {flex：1 0 100％; / *调整* /}标题> .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 = 横向布局> < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span>< / header>< header id =with-border-paddingclass =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; * / / *调整* /}
< header class = 水平布局 > < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span>< / header>< header id =with-border-paddingclass =horizontal-layout> < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span>< / header>
方式 flex-basis ， flex-shrink ，填充和 border-box 交互以建立框大小涉及一些相对复杂的计算。这里解释了它们：
问题的一个简单解决方案是：
header> span {flex：1 0 7px; }
.horizontal-layout {display：flex; flex-direction：row;} header> span {flex：1 0 7px; / *调整* /}标题> .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 = 横向布局> < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span>< / header>< header id =with-border-paddingclass =horizontal-layout> < span class =button> A< / span> < span class =app-name> B< / span> < span class =button> C< / span>< / header>
flex-grow：1 在 flex 中定义，没有必要 flex-basis 为100％。每个项目将在线路上获得相等的可用空间份额。但是， flex-basis 需要至少足以吸收填充和边界来自 box-sizing：border-box （在本例中为7px）。这些列现在跨行对齐。
According to flex-basis MDN documentation the flex-basis property calculates the size of a flex item related to the content box, unless a different option is defined by the box-sizing CSS property. But I didn't get the desired result neither in current Chrome nor in IE11.
I have written 2 examples:
.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
- First example is a
<header>with 3<span>tags each one having aflex: 1 1 100%(flex-basisis 100%). So everyspanis given a third part of theheader. - Second example is equal to first one, but in this case the second
spanhas some border and some padding. I thought thatflex-growwould make same result as first example but it didn't. Then I saw theflex-basisMDN documentation and understood that I had to setbox-sizing: border-box;to the flex items so that theflex-basiswas related to theborder-box. But it didn't either! Anyone knows why?
So thanks if someone can clarify about second example question.
In my code you can easily compare the sizes given to the <span> tags between both examples.
So it's clear that the columns across the two rows don't line up:
.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>
There are several ways to tackle this problem, and they involve flex-basis and box-sizing, and also flex-shrink and padding.
For example, if you disable flex-shrink, the alignment problem is gone.
.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>
Similarly, if you remove the padding, the alignment problem is also fixed.
.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>
The way flex-basis, flex-shrink, padding and border-box interact to establish box sizes involves some relatively complex calculations. They are explained here:
A simple solution to the problem is:
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>
With flex-grow: 1 defined in the flex shorthand, there's no need for flex-basis to be 100%. Each item will receive an equal share of free space on the line. However, flex-basis needs to be at least big enough to absorb the padding and border coming from box-sizing: border-box (in this case 7px). The columns are now aligned across rows.
这篇关于柔性基础和盒子大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
