为什么填充扩展一个flex项目？ [英] Why is padding expanding a flex item?
问题描述
在下面的代码片段中，第一行有两个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; code>< DIV> < div id =a>< / div> < div id =b>< / div>< / div>< div> < div id =c>< / div> < div id =d>< / div>< / div>
弹性项目的大小与填充和<$ c 解决方案
$ c> flex-grow 由中的计算确定flexbox规格。
这些计算类似于使用填充和 flex-shrink 的弹性项目大小。
坦率地说，这个数学技术性很强，并不是世界上最容易理解的。
但是如果你想进入它的细节如下：
示例
下面是一些希望使行为更清晰的例子。 请记住， flex-grow 不是直接建立flex项目长度的工具。这是一个在柔性物品中分配容器空间的工具。 flex-basis 属性设置flex项目的初始主要大小。如果 flex-grow 与 flex-basis 一起使用，则问题中的问题已解决（请参阅下面的示例＃4 ）。
$ b $ p 示例＃1
在块容器，您有 box-sizing：border-box ，代码中的框将平均呈现，不管填充情况如何。
body> div {height：50px; / *显示：flex; * / font-size：0; / *删除内嵌块空白* /} body> div> div {/ * flex：1; * / box-sizing：border-box; height：50px;显示：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>
示例2
在 flex容器中，其中你有 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>
示例＃3 在Flex容器中，您有 box-sizing：border-box 和 flex-grow ，它会出现 box-sizing code>不起作用...
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>
但这并不正确......
示例＃4
flex-grow 根据flex容器中的可用空间展开Flex项目的宽度。换句话说，它忽略填充（和边框）。然而，如果您只是指定 flex-grow 以及 flex-basis code>，边界框可以工作：
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>
In the snippet below, the first row has two divs with flex-grow: 1. As expected, each div takes up 50% of the screen.
When adding padding to the left div, that is no longer the case. Can someone explain why?
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.
A flex item's size with padding and flex-grow is determined by calculations in the flexbox spec.
These calculations are similar to the sizing of flex items with padding and flex-shrink.
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:
Examples
Below are examples that hopefully make the behavior more clear.
NOTE: Keep in mind that 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).
Example #1
In a block container, where you have 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>
Example #2
In a flex container, where you have 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>
Example #3
In a flex container, where you have 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>
but that's not really correct...
Example #4
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).
However, if you simply specify 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>
这篇关于为什么填充扩展一个flex项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
