内容简介：CSS Grid经过这么多年的发展已经越来越受人青眯了，到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习，对CSS Grid的特性也是略有所知，但还未达到完全的融汇贯通。因为它有很多的特性，而且这些特性对于CSSer来说很多都是新的概念，比如我们今天要说的分数单位在CSS Grid中可以使用任何长度单位来给网格轨道定义大小。比如在在MDN是这样描述的：
CSS Grid经过这么多年的发展已经越来越受人青眯了，到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习，对CSS Grid的特性也是略有所知，但还未达到完全的融汇贯通。因为它有很多的特性，而且这些特性对于CSSer来说很多都是新的概念，比如我们今天要说的分数单位 fr 就是一个新东东。那么这篇文章，咱们就来一起看看这个特性有什么特性，给我们又能带来什么好处。感兴趣的同学，请继续往下阅读。
简介
在CSS Grid中可以使用任何长度单位来给网格轨道定义大小。比如在 grid-template-columns 或 grid-template-rows 可以使用 px 、 rem 、 vw 、 100% 等CSS单位来设置大小，除此之外，CSS网格还引入了另一个长度单位来帮助我们创建网格轨道大小。这个新单位就是我们今天要聊的 fr 单位。大家喜欢把它称为 分数单位 。那么他究竟有什么作用呢？
在MDN是这样描述的：
新的 fr 单位代表网格容器中可用空间的一等份。
就从这样的描述或许还是会令人感到困惑。不用担心，我们继续往下阅读，我想可以帮你解惑的。
对比性思考
fr 是代表网格容器中可用空间的一等份，即 1fr 。如果是 2fr 那么就是把容器剩余的空间分成两等份。看到这里，是否会想起Flexbox布局中的 flex 呢？比如我们有这样的一个示例：
<div class="flex">
<aside>Sidebar</aside>
<main>Main</main>
</div>
.flex {
width: 600px;
background: orange;
display: flex;
min-height: 50vh;
}
aside {
width: 200px;
background: #f36;
}
main {
margin-left: 20px;
background: #f63;
flex: 1;
}
效果如下：
可以看出， main 元素设置 flex:1 时也占用了容器剩余的空间（ 600px - 200px - 20px = 380px ）。从浏览器的查看器中可以验证，计算是无误的：
在上面的示例中，我们再来变更一下，再添加一个侧边栏：
main {
flex: 2
}
aside:last-of-type {
flex: 1
}
使用浏览器再次验证我们的计算是不是正确的：
上图可以告诉我们答案，和我们最初想的是一样的。Flexbox中的 fle
以上所述就是小编给大家介绍的《CSS Grid带来的新单位：分数单位fr》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
面向对象技术UML教程
王少峰 / 清华大学出版社 / 2004-2 / 24.00元
《面向对象技术UML教程》主要介绍统一建模语言UML及其应用。全书内容丰富，包括UML的用例图、顺序图、协作图、类图、对象图、状态图、活动图、构件图和部署图等9个图中所涉及的术语、规则和应用，以及数据建模、OCL、业务建模、Web建模、设计模式、OO实现语言、RUP等方面的内容，同时介绍了Rose开发工具中的一些用法。《面向对象技术UML教程》最后是一个课程注册系统的实例研究，以及一些思考题和设计......一起来看看 《面向对象技术UML教程》 这本书的介绍吧!
