在flex-grow：1的flex项目中，为什么padding扩展了宽度？ [英] On a flex item with flex-grow: 1, why is padding expanding the width?
问题描述
在第一行中，有两个div flex-grow：1 。正如所料，每个div占用了屏幕的50％。
当向左边div添加填充时，不再是这种情况。有人可以解释为什么吗？
body> div {height：50px; display：flex;} body> div> div {flex：1; box-sizing：border-box;}＃a {background-color：red;}＃b {background-color：green;}＃c {padding：10px;我们可以通过使用下面的代码来实现这个功能：background-color：blue;}＃d {background-color：yellow;}
< DIV> < div id =a>< / div> < div id =b>< / div>< / div>< div> < div id =c>< / div> < div id =d>< / div>< / div>
计算在规格中定义
使用填充和<$的flex项目的大小
c $ c> flex-grow 是根据 flexbox规范。
这些计算类似于使用padding和 flex-shrink 的弹性项目的大小。 b
$ b坦率地说，这个数学是相当技术性的，并不是世界上最容易理解的。
但是如果你想进入以下是详细信息：
body> div {height：50px; / *显示：flex; * / font-size：0; / *删除内嵌块空格* /} body> div> div {/ * flex：1; * / box-sizing：border-box; height：50px;显示：内联块; width：50％;}＃a {background-color：red;}＃b {background-color：green;}＃c {padding：10px; background-color：blue;}＃d {background-color：yellow;
< DIV> < div id =a>< / div> < div id =b>< / div>< / div>< div> < div id =c>< / div> < div id =d>< / div>< / div>
示例＃2 ，您有 box-sizing：border-box ， width 或 flex-basis 是用来计算长度的，那么这些方块将会不分填充地呈现。
body> div {height：50px;显示：flex; } body> div> div {flex-basis：50％; / *宽度：50％;这个工程，以及* / box-sizing：border-box;}＃a {background-color：red;}＃b {background-color：green;}＃c {padding：10px; background-color：blue;}＃d {background-color：yellow;
< DIV> < div id =a>< / div> < div id =b>< / div>< / div>< div> < div id =c>< / div> < div id =d>< / div>< / div>
< hr>
Example＃3
$ b 如果你有 box-sizing：border-box 和 flex-grow ，它会出现 box-sizing 不起作用...
body> div {height：50px;显示：flex; } body> div> div {flex：1; / * flex-basis：50％; * / / *宽度：50％;这个工程，以及* / box-sizing：border-box;}＃a {background-color：red;}＃b {background-color：green;}＃c {padding：10px; background-color：blue;}＃d {background-color：yellow;
< DIV> < div id =a>< / div> < div id =b>< / div>< / div>< div> < div id =c>< / div> < div id =d>< / div>< / div>
jsFiddle演示
<但是这并不是真正的正确...
$ b
示例＃4 / strong>
宽度 。换句话说，它忽略填充（和边框）。然而，如果您只是指定 Check out the snippet below. In the first row, there are two divs with When adding a padding to the left div, that is no longer the case. Can someone explain why?
The size of a flex item with padding and These calculations are similar to the sizing of flex items with padding and Frankly, the math is quite technical and not the easiest thing in the world to understand. But if you want to get into it, here are the details: Below are examples that hopefully make the behavior more clear. NOTE: Keep in mind, Example #1 In a block container, where you have
Example #2 In a flex container, where you have
Example #3 In a flex container, where you have
but that's not really correct... Example #4 However, if you simply specify
这篇关于在flex-grow：1的flex项目中，为什么padding扩展了宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ flex-grow 以及 flex-basis code> border-box 将会起作用：
pre $ flex：1 1 50％; / * flex-grow，flex-shrink，flex-basis * /
body> div {height：50px;显示：flex; } body> div> div {flex：1 1 50％; / * flex-grow，flex-shrink，flex-basis * / / * flex-basis：50％; * / / *宽度：50％;这个工程，以及* / box-sizing：border-box;}＃a {background-color：red;}＃b {background-color：green;}＃c {padding：10px; background-color：blue;}＃d {background-color：yellow;
< DIV> < div id =a>< / div> < div id =b>< / div>< / div>< div> < div id =c>< / div> < div id =d>< / div>< / div> flex-grow: 1. As expected, each div takes up 50% of the screen.body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1;
box-sizing: border-box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;
}<div>
<div id="a"></div>
<div id="b"></div>
</div>
<div>
<div id="c"></div>
<div id="d"></div>
</div>The calculations are defined in the spec
flex-grow is based on calculations outlined in the flexbox specification. flex-shrink.
Examples
flex-grow is not a tool for directly
establishing the length of a flex item. It's a tool for distributing
space in the container among flex items. The flex-basis property
sets the initial main size of a flex item. If flex-grow is used with
flex-basis, the problem in the question is resolved (see example #4
below).box-sizing: border-box, the boxes in your code will render evenly regardless of padding.body > div {
height: 50px;
/* display: flex; */
font-size: 0; /* remove inline block whitespace */
}
body > div > div {
/* flex: 1; */
box-sizing: border-box;
height: 50px;
display: inline-block;
width: 50%;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;<div>
<div id="a"></div>
<div id="b"></div>
</div>
<div>
<div id="c"></div>
<div id="d"></div>
</div>
box-sizing: border-box, and the width or flex-basis is used to calculate length, the boxes will render evenly regardless of padding.body > div {
height: 50px;
display: flex;
}
body > div > div {
flex-basis: 50%;
/* width: 50%; this works, as well */
box-sizing: border-box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;<div>
<div id="a"></div>
<div id="b"></div>
</div>
<div>
<div id="c"></div>
<div id="d"></div>
</div>
box-sizing: border-box and flex-grow, it will appear that box-sizing doesn't work...body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1;
/* flex-basis: 50%; */
/* width: 50%; this works, as well */
box-sizing: border-box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;<div>
<div id="a"></div>
<div id="b"></div>
</div>
<div>
<div id="c"></div>
<div id="d"></div>
</div>
flex-grow expands the width of a flex item based on available space in the flex container. In other words, it ignores padding (and borders). flex-grow along with flex-basis, the border-box will work:flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */
body > div {
height: 50px;
display: flex;
}
body > div > div {
flex: 1 1 50%; /* flex-grow, flex-shrink, flex-basis */
/* flex-basis: 50%; */
/* width: 50%; this works, as well */
box-sizing: border-box;
}
#a {
background-color: red;
}
#b {
background-color: green;
}
#c {
padding: 10px;
background-color: blue;
}
#d {
background-color: yellow;<div>
<div id="a"></div>
<div id="b"></div>
</div>
<div>
<div id="c"></div>
<div id="d"></div>
</div>
登录 关闭
