#grid-auto-flow

#介绍

在网格布局中，grid-auto-flow 控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元件怎样排列。此属性作用在网格容器上。

#使用示例

css-apisrc/grid-auto-flow/App.tsx

Code

预览

#语法

grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
grid-auto-flow: dense;

#取值

此属性有两种形式：

单个关键字：row、column，或 dense 中的一个。

两个关键字：row dense 或 column dense。

• row

  默认值。该关键字指定自动布局算法按照通过逐行填充来排列元件，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。

• column

  该关键字指定自动布局算法通过逐列填充来排列元件，在必要时增加新列。

• dense

  该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元件，则会试图去填充网格中前面留下的空白。这样做会填上稍大元件留下的空白，但同时也可能导致原来出现的次序被打乱。

  如果省略它，使用一种“稀疏”算法，在网格中布局元件时，布局算法只会“向前”移动，永远不会倒回去填补空白。这保证了所有自动布局元件“按照次序”出现，即使可能会留下被后面元件填充的空白。

#形式定义

#形式语法

grid-auto-flow = [ row | column ] || dense

#兼容性