CSS参考手册
网格布局 | Grid Layout
网格自动流 | 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 |
网格布局 | Grid Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。