共计 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 函数那些事(三)背景图片函数
我的项目中会蕴含文章中的测试代码,都做好了相应的分类,欢送各位继续关注,有帮忙话能够点个赞哦!我的项目地址戳这里