CSS Grid带来的新单位:分数单位fr

栏目: CSS · 发布时间: 6年前

内容简介:CSS Grid经过这么多年的发展已经越来越受人青眯了,到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习,对CSS Grid的特性也是略有所知,但还未达到完全的融汇贯通。因为它有很多的特性,而且这些特性对于CSSer来说很多都是新的概念,比如我们今天要说的分数单位在CSS Grid中可以使用任何长度单位来给网格轨道定义大小。比如在在MDN是这样描述的:

CSS Grid经过这么多年的发展已经越来越受人青眯了,到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习,对CSS Grid的特性也是略有所知,但还未达到完全的融汇贯通。因为它有很多的特性,而且这些特性对于CSSer来说很多都是新的概念,比如我们今天要说的分数单位 fr 就是一个新东东。那么这篇文章,咱们就来一起看看这个特性有什么特性,给我们又能带来什么好处。感兴趣的同学,请继续往下阅读。

简介

在CSS Grid中可以使用任何长度单位来给网格轨道定义大小。比如在 grid-template-columnsgrid-template-rows 可以使用 pxremvw100% 等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;
}

效果如下:

CSS Grid带来的新单位:分数单位fr

可以看出, main 元素设置 flex:1 时也占用了容器剩余的空间( 600px - 200px - 20px = 380px )。从浏览器的查看器中可以验证,计算是无误的:

CSS Grid带来的新单位:分数单位fr

在上面的示例中,我们再来变更一下,再添加一个侧边栏:

main {
    flex: 2
}
aside:last-of-type {
    flex: 1
}

CSS Grid带来的新单位:分数单位fr

使用浏览器再次验证我们的计算是不是正确的:

CSS Grid带来的新单位:分数单位fr

上图可以告诉我们答案,和我们最初想的是一样的。Flexbox中的 fle


以上所述就是小编给大家介绍的《CSS Grid带来的新单位:分数单位fr》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数字化崇拜

数字化崇拜

[加] 文森特·莫斯可 / 黄典林 / 北京大学出版社 / 2010-1 / 26.00元

与此前的许多技术发展一样,以互联网为标志的数字化时代同样为人们提供了社会根本性变革的许诺:通过电脑,我们可以超越时空和政治。在本书中,文森特·莫斯可透过技术发展和经济泡沫的迷雾,试图探明围绕数字化新技术出现了哪些迷思,以及为何人们对这些迷思坚信不疑。他认为互联网时代投资者如此狂热的动因并不是他们对经济规则的无知,而是对赛博空间开启了一个新世界这样的迷思的坚定信念。 莫斯可指出,迷思并不是一些......一起来看看 《数字化崇拜》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具