首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
宝塔
V2EX  ›  前端开发

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

  •  
  •   banxi1988 · 2018-06-01 15:28:01 +08:00 · 701 次点击
    这是一个创建于 536 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在 Flexbox 布局中 flex 属性是一个复合属性。 也就是对于 flex-grow,flex-shrinkflex-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)
    

    原文链接

    1 回复  |  直到 2018-06-01 21:37:48 +08:00
        1
    fobven   2018-06-01 21:37:48 +08:00
    谢谢楼主分享
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   980 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 21ms · UTC 22:15 · PVG 06:15 · LAX 14:15 · JFK 17:15
    ♥ Do have faith in what you're doing.