Flexbox的flex属性不能接受css变量？

Question

我正在尝试在shorthad属性flex或flex-basis中使用css变量。 主要原因是要在我的css样式表的顶部将这个变量与其他变量一起使用，以轻松适应将来可能出现的更改，而不必搜索样式表中要进行此更改的地方。

我尝试过：

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

D'OH！ 刚意识到我忘了在根声明之前加上“：”！ 现在就可以了！

我还要补充一点，经过一番思考，除非出于某种设计目的需要将项目的高度设置为最小，否则min-height也会做得到。 此用例中的calc无关紧要，flex可以帮您完成，这就是它的意图！