关于前端:CSS函数那些事四网格函数

49次阅读

共计 3130 个字符,预计需要花费 8 分钟才能阅读完成。

这 3 个函数 都只能在网格布局中应用

fit-content()

fit-content 函数,接管一个参数,长度值,能够依照字面意思来解释他的作用,” 适应内容 ”。

<div class="fit-content-wrapper">
<div class="fit-item item1">test1dsssss3333333 sssssssssssssss sssssssssssssssssss sssssssssssssssssss ssssssssssssssssssss 这是用了 fit-content(400px)</div>
<div class="fit-item item2">test2 这是固定宽度 width:400px</div>
<div class="fit-item item3">test3 这是 fit-content(400px)</div>
</div>
.fit-content-wrapper{
width: 100%;
height: 200px;
display: grid;
grid-template-columns: fit-content(400px) 400px fit-content(400px);
grid-gap: 10px;
}
.fit-item{background-color: rgb(20, 106, 177);
}

成果

能够看到,当内容长度大于给定长度时,文字会主动换行,不会超过给定长度,当内容长度小于给定长度时,会依照给定的内容长度设置长度。

兼容性

兼容性对于古代浏览器没有什么问题,新版本支流浏览器根本都能反对,对于须要反对 ie 的我的项目则不能应用。

minmax()

minmax 函数示意一个闭区间范畴[min,max],当值小于等于 min 时,值等于 min, 当大于等于 max 时,值等于 max.

min-content,max-content

minmax 函数接管 min-content,max-content 参数,这两个参数示意内容最短和最长的内容长度。看上面案例。

<div class="minmax-wrapper">
<div class="minmax-item">
test1dsssss3333333 sssssssssssssss sssssssssssssssssss
sssssssssssssssssss ssssssssssssssssssss
</div>
<div class="minmax-item">
<p>test2222222222</p>
<p>test 232232323233</p>
<p>min-content 采纳最短的内容长度 </p>
</div>
<div class="minmax-item">
<p>test</p>
<p>test 232232323233222222</p>
<p>max-content 采纳最长的内容长度 </p>
</div>
</div>
.minmax-wrapper {
margin-top: 100px;
width: 100vw;
display: grid;
grid-gap: 10px;
grid-template-columns:
minmax(300px, 500px) minmax(50px, min-content)
minmax(100px, max-content);
}

成果

能够看到,第二个我的项目的最小的内容宽度为第二个我的项目中的第一个 p 标签

当设置成 minmax(50px,min-content)时,示意列宽最大的宽度也不能超过第一个 p 标签的内容宽度。

第三个我的项目的最大的内容宽度为第三个 p 标签的内容宽度

当设置成 minmax(100px,max-content)时,最大的内容宽度不会超过第三个 p 标签的宽度

兼容性

跟 fit-content 函数一样,不反对 ie, 但对支流的古代浏览器反对还不错。

repeat()

repeat 函数用来批量解决网格,接管 2 个参数,第一个参数示意执行次数,第二个参数示意长度。看上面例子

<div class="repeat-wrapper">
<div class="repeat-item">test1 3</div>
<div class="repeat-item">test2 23</div>
<div class="repeat-item">test3 444</div>
</div>
.repeat-wrapper {
margin-top: 100px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
}

成果

grid-template-columns: repeat(3, 100px) 等价于 grid-template-columns: 100px 100px 100px;

auto-fill,auto-fit

第一个参数除了指明具体次数外,repeat 还接管这几个参数 auto-fill,auto-fit,上面讲一讲这两个参数的概念。

auto-fill

auto-fill 示意由浏览器主动依据我的项目填充次数。当容器很宽的时候,会主动留出残余格子的宽度。如果网格容器在相干轴上具备确定的大小或最大大小,则反复次数是最大可能的正整数,不会导致网格溢出其网格容器。

<div class="repeat-wrapper">
<div class="repeat-item">test1 3</div>
<div class="repeat-item">test2 23</div>
<div class="repeat-item">test3 444</div>
<div class="repeat-item">test3 4444</div>
<div class="repeat-item">test3 444</div>
<div class="repeat-item">test3 444</div>
</div>
grid-template-columns: repeat(auto-fill, minmax(100px,1fr));

成果

auto-fit

auto-fit 也会主动计算,然而与 auto-fill 不同的是,auto-fit 不会保留残余的空格子,会将 auto-fill 残余的空格子重新分配到每个格子中。看上面示例

<div class="repeat-wrapper">
<div class="repeat-item">test1 3</div>
<div class="repeat-item">test2 23</div>
<div class="repeat-item">test3 444</div>
<div class="repeat-item">test3 4444</div>
<div class="repeat-item">test3 444</div>
<div class="repeat-item">test3 444</div>
</div>
grid-template-columns: repeat(auto-fit, minmax(100px,1fr));

成果

兼容性

最新版本的支流浏览器根本都能反对,仍旧不反对 ie。

总结

这 3 个网格函数极大的丰盛的网格布局,之前用网格布局用的不多,然而明天学习这 3 个函数以及相干的一些参数后,发现网格布局比照其余布局也是很不便的,前面在一些本人的小我的项目中能够试着用一下.

最初

我最近在总结 css 函数相干的货色,这篇是系列文章的第四篇,目前已产出

  • CSS 函数那些事(一)比拟函数
  • CSS 函数那些事(二)你不晓得的 attr()”)
  • CSS 函数那些事(三)背景图片函数

我的项目中会蕴含文章中的测试代码,都做好了相应的分类,欢送各位继续关注,有帮忙话能够点个赞哦!我的项目地址戳这里

正文完
 0