将 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)

看到这个example

Using CSS custom properties with flexbox