css - Flexbox flex 属性不能带 css 变量？

Question

我正在尝试在 shorthad 属性 flex 或 flex-basis 中使用 css 变量。主要原因是在我的 css 样式表顶部使用 ohters 来使用这个变量，以便轻松适应将来可能出现的更改，而无需搜索在样式表中进行更改的位置。

我努力了 ：

flex: 1 1 var(--menuItemHeight) ;

或者 ：

flex: 1 1 calc((100vh - 70px) / var(--numberOfMenuItems));

在哪里：--menuItemHeight: calc(( 100vh - 70px) / 5);

或在哪里：--numberOfMenuItems: 5;

甚至单独声明以下属性：

flex-grow: 1;

flex-shrink: 1;

flex-basis: var(--menuItemHeight);

这些都不起作用。

我可以完成这项工作的唯一方法是不在 flex 属性中包含任何变量，并直接在属性中进行计算。

flex: 1 1 calc((100vh - 70px) / 5);

或者

flex-basis: calc((100vh - 70px) / 5);

到目前为止，我找不到有关此问题的任何信息。这是 flex 属性的限制吗？

谢谢！

标签： cssflexbox

Answer 1

哦！刚刚意识到我忘了把“：”放在根声明之前！现在可以了！

另外我想补充一点，经过一番思考，除非您出于某种设计目的需要物品的高度，否则 min-height 也可以。这个用例中的 calc 是无关紧要的，flex 为你做，这就是它的意思！