为什么填充会扩展弹性项目?
[英] Why is padding expanding a flex item?
本文介绍了为什么填充会扩展弹性项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的代码片段中，第一行有两个带有 flex-grow: 1 的 div.正如预期的那样，每个 div 占据屏幕的 50%.
向左 div 添加填充时，情况不再如此.有人能解释一下原因吗?
body >div {高度:50px；显示:弹性；}身体 >div >div {弹性:1；box-sizing: 边框框；}#一个 {背景颜色:红色；}#b {背景颜色:绿色；}#C {填充:10px；背景颜色:蓝色；}#d {背景颜色:黄色；}
<div id="a"></div><div id="b"></div>
<div><div id="c"></div><div id="d"></div>
解决方案
计算在规范中定义.
带有填充和 flex-grow 的 flex 项目的大小由 flexbox 规范.
这些计算类似于带有填充和 flex-shrink 的 flex 项目的大小.
坦率地说，数学是非常技术性的，并不是世界上最容易理解的东西.
但如果您想深入了解，这里是详细信息:
<小时>
示例
以下示例有望使行为更加清晰.
注意: 请记住，flex-grow 不是直接确定 flex 项长度的工具.它是一种用于在 flex 项目之间分配容器中的空间的工具.flex-basis 属性设置弹性项目的初始主尺寸.如果 flex-grow 与 flex-basis 一起使用，问题就解决了(见下面的例子#4).
示例 #1
在块容器中，您有box-sizing: border-box，你的代码中的盒子会均匀地渲染，不管填充如何.
body >div {高度:50px；/* 显示:弹性；*/字体大小:0；/* 删除行内块空白 */}身体 >div >div {/* 弹性: 1;*/box-sizing: 边框框；高度:50px；显示:内联块；宽度:50%；}#一个 {背景颜色:红色；}#b {背景颜色:绿色；}#C {填充:10px；背景颜色:蓝色；}#d {背景色:黄色；
<div id="a"></div><div id="b"></div>
<div><div id="c"></div><div id="d"></div>
jsFiddle 演示
<小时>
示例#2
在 flex 容器中，您有 box-sizing: border-box 和 width 或 flex-basis 用于计算长度，无论填充如何，框都会均匀渲染.
body >div {高度:50px；显示:弹性；}身体 >div >div {弹性基础:50%；/* 宽度:50%；这也有效*/box-sizing: 边框框；}#一个 {背景颜色:红色；}#b {背景颜色:绿色；}#C {填充:10px；背景颜色:蓝色；}#d {背景色:黄色；
<div id="a"></div><div id="b"></div>
<div><div id="c"></div><div id="d"></div>
jsFiddle 演示
<小时>示例 #3
在一个 flex 容器中，你有 box-sizing: border-box 和 flex-grow，它会出现 box-sizing 不起作用...
body >div {高度:50px；显示:弹性；}身体 >div >div {弹性:1；/* 弹性基础:50%；*//* 宽度:50%；这也有效*/box-sizing: 边框框；}#一个 {背景颜色:红色；}#b {背景颜色:绿色；}#C {填充:10px；背景颜色:蓝色；}#d {背景色:黄色；
<div id="a"></div><div id="b"></div>
<div><div id="c"></div><div id="d"></div>
jsFiddle 演示
但这并不完全正确...
<小时>
示例 #4
flex-grow 根据弹性容器中的可用空间扩展弹性项目的宽度.换句话说，它忽略了填充(和边框).
然而，如果你简单地指定 flex-grow 和 flex-basis，border-box 会起作用:
flex: 1 1 50%;/* flex-grow, flex-shrink, flex-basis */
body >div {高度:50px；显示:弹性；}身体 >div >div {弹性:1 1 50%；/* flex-grow, flex-shrink, flex-basis *//* 弹性基础:50%；*//* 宽度:50%；这也有效*/box-sizing: 边框框；}#一个 {背景颜色:红色；}#b {背景颜色:绿色；}#C {填充:10px；背景颜色:蓝色；}#d {背景色:黄色；
<div id="a"></div><div id="b"></div>
<div><div id="c"></div><div id="d"></div>
jsFiddle 演示
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>
jsFiddle demo
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>
jsFiddle demo
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>
jsFiddle demo
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>
jsFiddle demo
这篇关于为什么填充会扩展弹性项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
