Ionic 网格

Ionic 网格系统是一个强大的基于移动设备的 flexbox 系统，用于构建自定义布局。flexbox 是一种 CSS 特性，Ionic 支持的所有设备都支持它。Ionic 网格主要由三个单元组成，分别是网格、行和列。它允许您选择任意数量的行和列。它们可以自动调整大小以适应可用空间，尽管可以根据您的需要进行更改。Ionic 网格由12 列布局组成，并根据屏幕尺寸具有不同的断点。我们也可以使用 CSS 自定义列数。

网格列

网格列是位于行内的单元格组件。网格的所有内容都位于一个列内。

网格行

网格行是包含不同数量列的水平组件。它确保列被正确放置。

示例

在这里，我们正在创建一个简单的网格，向您展示行和列的用法。

输出

当我们执行应用程序时，它将给出以下输出。

列大小

如果您不想让列大小自动调整，您可以选择size 属性根据您的需要设置列大小。以下示例帮助我们准确理解 size 属性的用法。

示例

注意：此示例将为列应用边框，以便以易于理解的方式显示它。

在这里，第一行使用自定义大小，而第二行使用默认列大小。

输出

重新排序列

您可以使用以下两个属性重新排序网格列。

1. Offset
2. 推和拉

Offset

此属性用于将列移动到指定列号的右侧。它将列的左边距增加指定列数的数量。

推和弹

推和拉属性通过指定的列数调整列的左侧和右侧。

示例

以下示例清楚地理解了offset和推拉属性的用法。

输出

当您执行上面的 Ionic 应用程序时，您将获得以下输出。在这里，第一列使用 offset 属性，第二列使用推拉属性。

列对齐

Ionic 网格允许您使用两种类型的列对齐方式，如下所示。

1. 垂直对齐
2. 水平对齐

垂直对齐

网格系统允许多种方式垂直对齐内容。它通过将不同的类添加到行来对齐行内的列。这些不同的类是

• ion-align-items-start
• ion-align-items-center
• ion-align-items-end

示例

输出

在下面的输出中，第一行将列对齐到开始位置，第二行对齐到中心，第三行对齐到末尾。

水平对齐

网格系统允许多种方式水平对齐内容。它通过将不同的类添加到行来对齐行内的列。这些不同的类是

• ion-justify-content-start
• ion-justify-content-center
• ion-justify-content-end
• ion-justify-content-around
• ion-justify-content-between

示例

输出

当您运行 Ionic 应用程序时，它会给出以下输出。

网格大小

默认情况下，网格占用屏幕的100% 宽度。如果您需要根据屏幕尺寸设置最大宽度，请在 <ion-grid> 元素中添加 fixed 属性。下表显示了不同的网格大小。