个性化阅读
专注于IT技术分析

如何更容易地快速学会网格布局?CSS Grid Layout内容补充(四)

一、简介

在之前的文章中我们详细讨论了CSS Grid网格布局系统,但是还是有很多细节未能提及,本文是对Grid网格布局中的一些细节的补充。主要针对网格布局中会使用到的函数和单位,比如常用的repeat函数,fr单位等,这些概念提供更灵活的布局设计,现在我们来一起学习更多高级布局属性。

二、<flex>单位

<flex>是CSS中的一种数据类型,数据类型由放置在”<”和”>”之间的关键字表示。比如我们常用的用来设置颜色的color: #FFF,color属性接受的#FFF就是一种数据类型<color>。

这里的<flex>就是一种数据类型,由数值和单位fr组成,如2fr。

Fr单位常用在Grid网格布局中,用于grid-template-columns、grid-template-rows的相关设置。下面我们看看fr单位在网格布局中是如何发挥作用的。

首先考虑最简单的情形:

.grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 50px;
}

可以看到单独设置网格轨道大小为1fr,该轨道就占据了一行。继续看:

.grid{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 50px;
    grid-column-gap: 20px;
}

是不是按比例分配了?现在你大概看出fr单位的作用了吧。Fr单位表示网格容器中的可变长度,可以使用fr来定义网格轨道大小的弹性系数。

所以上面代码中1fr 2fr表示两个轨道大小比例为1:2 。

三、CSS3自适应关键字

分别是fill-content和fit-content,max-content和min-content,他们两两相对应。前者是以元素为中心,设置元素自身的内容填充方式:充满还是收缩;后者以容器为中心,容器根据自身的子元素的宽度设置自身的宽度。

1)元素自身的内容填充方式

.container{
    height: 100px;
}
.container .item{
    background-color: #ff8266;
    height: -webkit-fill-available;
}

该布局中子元素的高度height设置为-webkit-fill-available,子元素的高度自动填充容器的高度。设置width也是同样的道理,自动填充容器的宽度。

和fill-available意思相反的是fit-content 收缩内容

2)容器宽度由子元素决定

.container{
    background-color: #af8f65;
    height: 200px;
    width: -webkit-max-content;
}
.container .item-01{
    background-color: #ff8266;
    width: 80px;
    height: 100px;
}
.container .item-02{
    background-color: #87beff;
    width: 150px;
    height: 100px;
}

容器设置宽度的采用方式为-webkit-max-content,由于item-01的宽度比item-02的宽度小,所以容器的宽度最后是采用item-02的。

Min-content和max-content相反,不过不同的是,采取宽度值最小中最大的那个。容器中可以容纳图片、文字、或其它html元素,将每个类型的元素中的最小值找到,进行比较,取最大的一个。图片的宽度值是图片宽度,文字英文一个单词是一个宽度值,中文一个字为一个宽度值。

四、minmax()介绍

minmax(最小值,最大值),用于设置长宽的区间范围,需要注意的是,如果最大值小于最小值,那么最后是最小值。<flex>(fr作单位)作为最小值无效,作最大值表示网格轨道的弹性系数。

.grid{
    display: grid;
    grid-template-columns: minmax(max-content,200px) minmax(100px,1fr);
    grid-template-rows: 50px;
    grid-column-gap: 20px;
}

.grid .item{
    background-color: #ff8266;
}

Minmax两个参数可接受的数据类型除了我们平时常用的像素值表示,百分比和auto,还可以使用刚刚介绍的<flex>类型,max-content和min-content。

完整语法如下:

minmax( [ <length> | <percentage> | <flex> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )

percentage是百分比的意思。

五、fit-content

fit-content()将一个固定值转为可用大小的值,其转换计算公式为(argument为输入值):

min(maximum size, max(minimum size, argument))

该函数常用于CSS Grid网格布局,其中maximum的大小由max-content定义,minimum的大小由auto定义。

Fit-content也可以用于定义盒子模型的大小,诸如width,max-width,其中maximum的大小指的是最大内容大小,minimum大小指的是最小内容大小。

Fit-conent接受两种类型的参数,一般长度值和百分比表示。

六、calc

calc()函数可以用于任何地方,支持多种数据类型,允许你动态计算CSS的属性值,calc()函数的使用形式:calc(运算表达式)。

运算操作支持加减乘除,如calc(100% – 200px),表示父容器的总宽度减去200像素,注意”-”操作符两边要留空白。

例子:

.container .item-02{
    width: calc(100% - 12px);
    height: 100px;
}

七、repeat

repeat() CSS函数代表一个轨道列表的重复片段,允许具有固定模式的行列写成更见简单紧凑的方式。

该方法常用CSS Grid网格布局grid-template-columns/rows的属性设置,除了允许传入多种参数外,它接受两个参数:行列的数量和宽度的大小,形式如下:

repeat(number of columns/rows, the column width we want);

例子:

.grid{
    display: grid;
    grid-template-columns: 200px repeat(5, 1fr) 100px repeat(3,50px);
    grid-template-rows: 50px;
    grid-column-gap: 20px;
}
赞(0) 打赏
未经允许不得转载:srcmini » 如何更容易地快速学会网格布局?CSS Grid Layout内容补充(四)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏