重复 | repeat

repeat()表示跟踪列表的重复片段, 允许大量显示重复模式的列或行以更紧凑的形式编写。

这个函数可以用在CSS Grid属性grid-template-columns和grid-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表示占用网格项目的最大最小内容贡献。

min-content表示占用网格轨道的网格项目的最大最小内容贡献。网格track.auto作为最大的，相同的max-content。至少它代表最大的最小尺寸（由min-width/min-height）网格物体占据网格轨迹。自动填充如果网格容器在相关轴中具有确定的或最大的尺寸，则重复次数是最大可能的正整数，其不会导致网格溢出其网格容器。如果这是确定的，则将每个轨道作为其最大轨道尺寸函数处理。否则，作为其最小跟踪尺寸函数，并考虑到网格间隙。如果任何重复次数溢出，则重复次数为1.否则，如果网格容器在相关轴中具有确定的最小大小，则重复次数是满足最小要求的最小可能正整数。否则，指定的曲目列表只能重复一次

行为与auto-fill相同，除了在放置网格项之后，任何空的重复轨道被折叠。一个空的轨道是一个没有流入网格项目或跨越其中的项目。（这可能会导致所有曲目被折叠，如果它们都是空的。）

折叠轨道被视为具有固定的轨道大小函数。0px它两边的装订线会收缩。

为了查找自动重复轨道的数量，用户代理将轨道大小设置为用户代理指定的值（例如1px），以避免被零除。

形式语法

Syntax not found in DB!

例

CSS

#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;
}

HTML

<div id="container">
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    Inflexible item of 100 pixels width.
  </div>
</div>

结果

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'repeat()' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	57.01	No support	52.0 (52.0)2	No support	44.03	No support4

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	No support	52.0 (52.0)2	No support	?	No support

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18