Css Calc（）不适用于firefox中的flexbox宽度

我试图使用css

calc（）

函数和变量来确定flexbox的宽度。这对我来说在chrome和safari中是可行的，但firefox似乎根本没有意识到它的价值

这就是我想要它看起来的样子

这就是它在电影中的表现

---

CSS:

---

HTML:

---

---

有没有办法解决这个问题，或者我应该用另一种方法来解决这个问题？

你的

var

语法不正确，Chrome可以侥幸逃脱，但Firefox没有

默认值应在括号内。你写的

宽度

和

高度

都是正确的，但是

填充

却不是正确的

这是错误的：

.card-holder {
                                                 ∨                  ∨
    width: calc((var(--card-width, 340px) * 3) + ((var(--card-padding), 20px) * 2));

                                                   ∨                 ∨
    height: calc((var(--card-height, 150px) * 2) + (var(--card-padding), 20px));
}

.card-holder {
    width: calc((var(--card-width, 340px) * 3) + (var(--card-padding, 20px) * 2));
    height: calc((var(--card-height, 150px) * 2) + var(--card-padding, 20px));
}

应该是：

.card-holder {
                                                 ∨                  ∨
    width: calc((var(--card-width, 340px) * 3) + ((var(--card-padding), 20px) * 2));

                                                   ∨                 ∨
    height: calc((var(--card-height, 150px) * 2) + (var(--card-padding), 20px));
}

.card-holder {
    width: calc((var(--card-width, 340px) * 3) + (var(--card-padding, 20px) * 2));
    height: calc((var(--card-height, 150px) * 2) + var(--card-padding, 20px));
}

/*变量*/
：根{
/*纸牌*/
--卡宽：340px；
--卡片高度：150px；
--卡片填充：20px；
}
/*全球的*/
html，
身体{
背景：#2e；
宽度：100vw；
高度：100vh；
填充：0；
保证金：0；
}
a{
文字装饰：无；
}
/*持卡人*/
.科{
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.持卡人{
宽度：计算（（变量（--卡片宽度，340px）*3）+（变量（--卡片填充，20px）*2））；
高度：计算（（变量（--卡片高度，150px）*2）+变量（--卡片填充，20px））；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
对齐内容：之间的空间；
}
/*卡片*/
.卡片{
宽度：var（--卡宽，340px）；
高度：var（--卡高度，150px）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景：#fff；
颜色：#000；
过渡：0.1s；
}
.卡一{
左边距：-25px；
右边距：14px；
字体大小：3.4rem；
}
.卡h4{
文本转换：大写；
字号：1rem；
字号：600；
字母间距：0.5px；
}

---

您没有为此使用任何特殊原因

不使用flexbox，您只需执行以下操作：

display: grid;
grid-template-columns: repeat(3, max-content);
grid-gap: 1em;

我在这里修改了您的示例：请查看我修改的行的注释

---

希望这有帮助！：）

嗯，我没想过——我要试试看！在flexbox上使用网格是否更好？无论如何谢谢你！Grid和flexbox用于解决不同的问题（结合使用时功能非常强大），但当您尝试以相同的方式在多个轴上等距放置项目时，

Grid gap

属性非常有用。您是否尝试过mozila hack，即width:-moz calc（25%-1em）；