在 Flexbox 布局中 flex
属性是一个复合属性。
也就是对于 flex-grow
,flex-shrink
和 flex-basis
的简写。我发现不少人包括我有时容易对 flex
属性设置的值记不太清它们的对应关系。今天看了下文档 flex property
总结出如下一个类的构造描述。希望可以帮助到大家。
class flex {
flexGrow: number;
flexShrink: number;
flexBasis: number | string;
constructor() {
// 开始设置为默认值
this.flexGrow = 0;
this.flexShrink = 1;
this.flexBasis = "auto";
const arg1 = arguments[0];
const arg2 = arguments[1];
const arg3 = arguments[1];
switch (arguments.length) {
case 1:
// 当只有一个参数时。 即 flex : auto 等。
if (arg1 === "auto") {
this.flexGrow = 1;
} else if (arg1 === "initial") {
// 默认
} else if (arg1 === "none") {
this.flexShrink = 0;
} else if (typeof arg1 === "number") {
// 如果是一个数字
this.flexGrow = arg1;
} else {
this.flexBasis = arg1;
}
break;
case 2:
this.flexShrink = arg1;
if (typeof arg2 === "number") {
this.flexGrow = arg2;
} else {
this.flexBasis = arg2;
}
break;
case 3:
this.flexGrow = arg1;
this.flexShrink = arg2;
this.flexBasis = arg3;
break;
default:
// error
break;
}
}
}
// 把 flex: auto 想像成 flex("auto")
// const f1 = flex("auto");
// assert(f1.flexGrow === 1)