网格自动流 | grid-auto-flow

grid-auto-flow控制自动布局算法如何工作，指定自动放置项目将究竟是如何流入网格。

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

初始值	row
应用于	grid containers
是否继承	no
适用媒体	visual
计算值	as specified
动画类型	discrete
规范顺序	the unique non-ambiguous order defined by the formal grammar

语法

取值为下面两种形式之一：

单个关键字：row，column或dense。

两个关键词：row dense或column dense.

价值

row是一个关键字，指定自动放置算法通过依次填充每一行来放置项，并在必要时添加新行。如果两者都没有row也不column提供，row都是假设的。

column是一个关键字，指定自动放置算法通过依次填充每个列来放置项，在必要时添加新列。

dense是一个关键字，指定自动布局算法使用“密集”填充算法，如果稍后出现较小的项目，该算法将尝试在网格中更早地填充漏洞。这可能会导致项目出现无序，这样做会填补较大的项目留下的漏洞。

如果省略，则使用“稀疏”算法，其中放置算法只在放置项目时在网格中“向前”移动，从不回溯以填补漏洞。这确保了所有自动放置的项目看起来“有序”，即使这留下了漏洞，可能已经填补了以后的项目。

形式语法

[ row | column ] || dense

例

HTML内容

<div id="grid">
? <div id="item1"></div>
? <div id="item2"></div>
? <div id="item3"></div>
? <div id="item4"></div>
? <div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
? <option value="column">column</option>
? <option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
<label for="dense">dense</label>

CSS内容

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column;  /* or 'row', 'row dense', 'column dense' */
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}

规范

Specification	Status	Comment
CSS Grid LayoutThe definition of 'grid-auto-flow' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

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

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	57.01	57.01	52.0 (52.0)2	No support	44	No support

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

最后更新于：2017-12-18