胖蔡说技术
随便扯扯

CSS函数repeat()的使用

CSS repeat()函数表示轨道列表的重复片段,主要是用于网格显示重复模式的列或者行。repeat()函数支持三种样式:<track-repeat><auto-repeat><fixed-repeat>。该函数适用的属性:grid-template-columnsgrid-template-rows。其格式如下:

/* <track-repeat> values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* <auto-repeat> values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <fixed-repeat> values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
  • <length>:正整数长度
  • <percentage>:相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小,那么 <percentage> 必须被视为 auto
  • <flex>:带有 fr 单位的非负尺寸指定轨道的弹性系数。任何被 <flex> 指定大小的轨道会根据其弹性系数按比例分配剩余空间。
  • max-content:代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
  • min-content:代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
  • auto:作为最大值,等同于 max-content。作为最小值,它代表占据网格轨道的网格项目的最小尺寸的最大值
  • auto-fill:果网格容器在相关轴上具有确定的大小或最大大小,则重复次数是最大可能的正整数,不会导致网格溢出其网格容器。
  • auto-fit:行为与 auto-fill 相同,除了放置网格项目后,所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。

浏览器兼容性

repeat()函数所有浏览器均支持。

示例

<html>
<head>
<title>repeat()函数使用 </title>
<style>
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
</style>

<body>
<div id="container">
  <div>
    50px
  </div>
  <div>
    flexible 宽度.
  </div>
  <div>
    50px
  </div>
  <div>
    flexible 宽度.
  </div>
  <div>
    100px
  </div>
</div>
</body>
</html>

结果显示:

赞(0) 打赏
转载请附上原文出处链接:胖蔡说技术 » CSS函数repeat()的使用
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏