你知道css单位fr吗？

最新推荐文章于 2025-07-11 21:18:36 发布

转载最新推荐文章于 2025-07-11 21:18:36 发布 · 2.5k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c7552b0e51d457fcb40b64f

文章标签：

#javascript #ViewUI

fr是css一个比较新潮的单位，在Grid布局中常见到它的身影。

这里回答了两个问题：

fr是什么？能帮助解决什么问题？
fr有趣的实践情况——和其他单位混合使用

`fr`是什么？能帮助解决什么问题？

这里有一段简单grid布局demo：

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>
复制代码

/*主要css样式*/
.grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 10px;
}
复制代码

细心的朋友会发现在设置grid-template-columns: repeat(4,25%)和grid-column-gap:10px之后，页面的底部是会有水平方向滚动条的。因为在算每列宽度的时候没有将间隔给剔除。

fr正是被用于优雅地解决这样的问题，而不用自己手动calc(..)去计算：

/*css修改代码*/
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}
复制代码

`fr`有趣的实践情况——和其他单位混合使用

比如要实现这样的布局：左侧是固定宽度的导航条，右侧所有列均匀瓜分剩余空间

.grid {
  display: grid;
  grid-template-columns: 250px repeat(12, 1fr);	/*注意这里和px的混合使用*/
  grid-column-gap: 10px;
}
复制代码

小结

fr是在看Grid布局中遇到的陌生的css单位值，平时用的也比较少。学习了css tricks上的An Introduction to the fr CSS unit ，讲得挺通俗易懂。css也在朝着一个“智能”的方向，挺博大精深的。也强烈推荐css tricks，网页设计风格很喜欢，介绍也很仔细。

转载于:https://juejin.im/post/5c7552b0e51d457fcb40b64f