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 属性的限制吗？

谢谢!

Answer 1

噢!刚意识到我忘了在根声明之前加上“:”!现在可以使用了!

我还想补充一点，经过一番思考，除非您出于某些设计目的需要元素的高度，否则最小高度也可以做到这一点。这个用例中的 calc 是无关紧要的，flex 会为你做，这就是它的意思!