用一个类让你理解 CSS `flex` 属性

[banxi1988]

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

原文链接

[fobven]

谢谢楼主分享