gpt4 book ai didi

css - Flexbox 子元素的边距如何影响它们的计算宽度?

转载 作者:太空宇宙 更新时间:2023-11-03 18:04:13 25 4
gpt4 key购买 nike

在探索 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>

http://jsfiddle.net/52fKh/

我不太明白第二个 Flexbox 中的宽度是如何计算的。任何人都可以阐明这一点,并可能提供一种解决方法以使两个 Flexbox 对齐吗?提前致谢!

最佳答案

从您可能的总宽度中减去边距空间,然后适当划分。

以这个 JS Fiddle 为例,为了演示,我将您的 flexbox 类宽度限制为 600PX...

http://jsfiddle.net/52fKh/2/

.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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com