在探索 Flexbox 的使用时,我遇到了一些我觉得有点奇怪的事情。如果我将三个水平边距为 10px 的 child 扔到一个 Flexbox 容器中,每个 child 的 flex 值为 1,每个 child 的宽度都相等,这很好。但是如果我有两个 child ,其中一个的 flex 值为 2,那么它就不完全是 2/3rds-1/3rd split。但是,如果我删除边距,它是 2/3rds-1/3rd split,这是需要的。
下面是一些示例代码:
<div class = "flexbox">
<div class = "flex" style = "background-color: red;">1/3</div>
<div class = "flex" style = "background-color: green;">1/3</div>
<div class = "flex" style = "background-color: blue;">1/3</div>
</div>
<div class = "flexbox">
<div class = "flex double" style = "background-color: yellow;">2/3</div>
<div class = "flex" style = "background-color: purple;">1/3</div>
</div>
<style>
.flexbox
{
display: flex;
}
.flexbox .flex
{
flex: 1;
margin: 0 10px;
}
.flexbox .flex.double
{
flex: 2;
}
</style>
我不太明白第二个 Flexbox 中的宽度是如何计算的。任何人都可以阐明这一点,并可能提供一种解决方法以使两个 Flexbox 对齐吗?提前致谢!
最佳答案
从您可能的总宽度中减去边距空间,然后适当划分。
以这个 JS Fiddle 为例,为了演示,我将您的 flexbox 类宽度限制为 600PX...
.flexbox
{
display: flex;
width: 600px;
}
对于您的 flex: 2;
示例...
两个div的左右边距都是10px,也就是每个div 20px,2个div的总边距空间是40px。
600-40 = 560
560/3 = 186.666666667
186.6666667 * 2 = 373.333333333
如果查看 inspect element,您会看到 flex: 2;
div 的宽度为 373PX。
总结一下就是根据div的实际宽度计算宽度,不包括边距。首先评估边距空间,然后剩下的将在数学上相加。
关于css - Flexbox 子元素的边距如何影响它们的计算宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24960982/