在 grid布局中经常会看到有auto,fr这样的来表示长度,那么它们有啥区别呢?

    auto和fr

    fr表示占据剩余空间的多少,

    例如grid-template-columns:1fr  50px ,那么1fr代表的是除了50px的剩余的部分,因为这里只有一个fr,2fr,3fr,...nfr结果都是一样的。

    例如grid-template-columns:1fr  50px  2fr,那么1fr将占据剩余空间的1/3,2fr占据2/3。

    auto是分配剩余空间,

    例如grid-template-columns:auto  50px  auto,那么两个auto将会平分剩余空间,表现和1fr 50px 1fr是一样的。

    auto遇上fr

    如果auto遇上fr,那么auto将会被压缩成元素真实大小,因为fr会将可用的剩余空间全部占据。



    回到顶部
    我要评论

    所有评论

      相关文章