css中的repeat函数的用法

全款买辣椒
455 阅读5分钟

在学习css的过程中发现css是真的难，可能某一个属性就得去深究半天，不积跬步无以至千里，遇到不会的且觉着有深度的问题尽量学习记录一下吧。今天来看一下css中的repeat()函数。

定义

先看MDN的定义吧：

CSS repeat() 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。该函数可以用于 CSS Grid 属性中 grid-template-columns 和 grid-template-rows.

我个人的理解: grid布局中grid-template-columns 和 grid-template-rows 两个属性分别是定义网格的列数和行数，如果定义大量的重复宽度的行或列就可以用到这个函数简化了，如下：

grid-template-columns: 100px 100px 100px;

// 等同于

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

取值

定义其实不难，重点是它的语法和使用，尤其是当它与关键字结合时会有意想不到的效果。

repeat函数所有的取值如下：

  1. 正整数长度。如 100px、10vw等

  2. 百分比，相对于网格容器块的大小的百分比。如 10%

  3. 带有 fr 单位的非负尺寸指定轨道的弹性系数。 如 1fr

  4. max-content 关键字，代表占据网格轨道的网格项目所分配的最大内容区域的最大值。

  5. min-content 关键字，代表占据网格轨道的网格项目所分配的最小内容区域的最小值。

  6. auto 关键字，作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同min-width/min-height所指定的)）。

  7. auto-fill 关键字，内容自动填充，具体解释和下面的auto-fit关键字一起说。

  8. auto-fit 关键词，内容自动适应。

Demo

  1. 网格划分成4列，比例为1:1:1:1
 repeat(4,1fr);

repeat-demo-1.png

Demo传送门

  1. 使用关键字 min-content/max-content
 repeat(4,min-content);

 repeat(4,max-content);

1）先看min-content的代码和示例图：

<div class="grid-containter">
  <div class="item">
    <input type="text"></input>
    <p>grid grid grid grid grid grid grid grid grid grid</p>
    <p>测试</p>
    <p>AAAAAAAAAAAAAAAAAA</p>
  </div>
  <div class="item">
    <p>AAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAA BBBBBB</p>
    <p>cc</p>
  </div>
  <div class="item">
    <p>测试</p>
    <p>AAAAA</p>
    <p>cc</p>
  </div>
</div>

.grid-containter {
  padding: 2px;
  width: 50vw;
  height: 220px;
  border: solid 2px #000;
  border-radius: 10px;
  display: grid;
  grid-template-columns: repeat(4,min-content);
  place-items: center;
  gap: 5px;
}
.item {
  width: 100%;
  height: 100%;
  border: solid 1px transparent;
  border-radius: 10px;
  background-color: #F89427;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

示例图：

repeat-demo-2.png

Demo传送门

对于min-content这个关键词我个人觉着是不太好理解的，如果看完代码和示例图有疑问的话可到文末看对于这个关键词的单独分析。

2）再看max-content的代码和示例图

代码只需要改动css中的一行，把 min-content 替换成 max-content

grid-template-columns: repeat(4,max-content);

示例图

repeat-demo-2-2.png

可以看到它们之间的区别，只有第一个div的宽度变大了，是因为此max-content取得是第一个p标签的宽度作为div的宽度。而min-content取得是最后一个p标签的宽度。

3.固定某列宽度，其它列按比例平分

grid-template-columns: 400px repeat(3,1fr);

repeat-demo-3.png

Demo传送门

  1. 使用minmax函数，设置列的最大、最小值
grid-template-columns: repeat(4, minmax(100px, 1fr));
  1. 使用关键字 auto-fill/auto-fit
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

auto-fill

repeat-demo-4.png

auto-fit

repeat-demo-5.png

auto-fill和auto-fit的区别从它们的名字上就能看出来，一个是自动填充，一个是自动适应，看一下国外大佬的解释：

auto-fill: 填充尽可能多的列。因此，只要新列可以容纳，它就会创建隐式列，因为它试图用尽可能多的列填充行。新添加的列可以也可能是空的，但它们仍将占据行中的指定空间。

auto-fit: 适合当前可用列的空间扩大，以便他们占用任何可用的空间。浏览器在用额外的列填充这些额外的空间之后(如自动填充) ，然后折叠空的列。

Demo传送门

repeat-demo-4-1.png

如上图：当容器空间充足时，auto-fill会隐式的创建更多的列。

min-content关键词

为什么把min-content关键词单独拿出来说，我查了很多资料并没有很好的解释到位，而且我发现网上还有一些关于它的demo的理解是错误的，所以特此解释一下我的理解：

看MDN的解释：

The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.

这个是英文版的，为什么不看中文版的呢？因为中文版的内容没有及时更新，至少截止到我写这篇文章的时候是没有的。

大概的意思就是min-content 关键字表示内容固有的最小宽度，对于文本而言，最小宽度则是最长单词的宽度。懂了吗？如果一个容器内的内容是文本，如果用了min-content关键字，那么该容器的宽度则取容器内单词最长的文本的宽度，而不是单词最短的那个，这里还有一个坑就是，对于中文而言，一个字就是一个“词”，而对于英文和数字，则是根据空格来区分一个词的。比如 "HelloWorld"这是一个词。

再看上文中的例子就可以理解了吧？

以上，虽然文章标题是repeat函数，但是并不只是讲了repeat函数，笔者水平有限，若有错误敬请指正，不明白的地方也可评论区留言交流~

参考资料：

Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit

MDN min-content

avatar
文章
阅读
粉丝