将 CSS 自定义属性与 Flexbox 结合使用

Question

我想在 Flexbox 中使用 CSS 自定义属性来定义我的flex-basis，它可以是可变的。以下代码无法正常工作。该变量计算得很好，但flex-basis没有应用。flex是否可以像这样在属性中使用自定义属性？

.row-flex {
    --flex-basis: 30%;

    display: flex;
}

.row-flex >:first-child {
     flex-basis: 0 0 var(--flex-basis);
}

Answer 1

自定义属性在 Flexbox 上工作正常，但问题出在你的最后一个 css 行上。

你应该使用：

.row-flex >:first-child {
     flex: 0 0 var(--flex-basis);
}

或者

.row-flex >:first-child {
     flex-basis: var(--flex-basis);
}

flex-basis仅接受一个参数，即值。而 flex 需要 3 个参数：(flex-grow - flex-shrink - flex-basis)

看这个例子