Ionic网格 _Ionic网格

本文概述

网格列
网格行
列大小
重新排序列
列对齐
网格尺寸

Ionic网格系统是一个功能强大的基于移动的Flexbox系统, 用于构建自定义布局。 flexbox是一项CSS功能, Ionic支持的所有设备都支持它。Ionic网格主要由网格, 行和列三个单元组成。它允许你选择所需的行和列。他们可以自动调整大小以适应可用空间, 尽管可以根据需要进行更改。Ionic网格由12列布局组成, 根据屏幕大小, 其断点不同。我们还可以使用CSS自定义列数。
网格列网格列是行内的单元格组件。网格的所有内容都在列内。
网格行网格行是包含不同数量列的水平组件。这样可以确保列的位置正确。
例
在这里, 我们正在创建一个简单的网格, 向你显示行和列的用法。

< ion-header> < ion-toolbar> < ion-title> Grid Example < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < ion-grid> < ion-row> < ion-col> ion-col 1< /ion-col> < ion-col> ion-col 2< /ion-col> < ion-col> ion-col 3< /ion-col> < /ion-row> < ion-row> < ion-col> ion-col 4< /ion-col> < ion-col> ion-col 5< /ion-col> < /ion-row> < /ion-grid> < /ion-content>

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

文章图片
列大小如果你不想让列大小自动调整, 则可以选择size属性以根据需要设置列大小。以下示例有助于我们准确地理解size属性的用法。
例
注意：此示例将在列上应用边框, 以易于理解的方式显示它。在此, 第一行使用自定义大小, 而第二行使用默认列大小。

< ion-header> < ion-toolbar> < ion-title> Grid Example < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < ion-grid> < ion-row> < ion-col size="5"> col 1< /ion-col> < ion-col > col 2< /ion-col> < ion-col size="3"> col 3< /ion-col> < /ion-row> < ion-row> < ion-col> col 4< /ion-col> < ion-col> col 5< /ion-col> < /ion-row> < /ion-grid> < /ion-content>

输出量

文章图片
重新排序列你可以使用以下两个属性来重新排序网格列。

偏移量
推和拉

偏移量
此属性用于将列移动到指定列号的右侧。它将列的左边距增加指定列的数量。
推和弹出
push和pull属性将列的左右调整指定的列数。
例
以下示例清楚地了解了offset和push和pull属性的用法。

< ion-header> < ion-toolbar> < ion-title> Grid Example < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < ion-grid> < ion-row> < ion-col size="3"> < div> 1 of 2 < /div> < /ion-col> < ion-col size="3" offset="4"> < div> 2 of 2 < /div> < /ion-col> < /ion-row> < ion-row> < ion-col size="9" push="3"> < div> 1 of 2 < /div> < /ion-col> < ion-col size="3" pull="9"> < div> 2 of 2 < /div> < /ion-col> < /ion-row> < /ion-grid> < /ion-content>

输出量
当你执行上面的Ionic应用程序时, 你将获得以下输出。在此, 第一列使用offset属性, 第二列使用push和pull属性。

文章图片
列对齐 Ionic网格允许你使用两种类型的列对齐方式, 如下所示。

垂直对齐
水平对齐

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

Ionic对齐项目开始
Ionic对齐项目中心
Ionic对齐项目结束

例

< ion-header> < ion-toolbar> < ion-title> Grid Example < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < ion-grid> < ion-row class="ion-align-items-start"> < ion-col> ion-col< /ion-col> < ion-col> ion-col< /ion-col> < ion-col> ion-col < br> # < br> # < /ion-col> < /ion-row> < ion-row class="ion-align-items-center"> < ion-col> ion-col< /ion-col> < ion-col> ion-col< /ion-col> < ion-col> ion-col < br> # < br> # < /ion-col> < /ion-row> < ion-row class="ion-align-items-end"> < ion-col> ion-col< /ion-col> < ion-col> ion-col< /ion-col> < ion-col> ion-col < br> # < br> # < /ion-col> < /ion-row> < /ion-grid> < /ion-content>

输出量
在下面的输出中, 第一行将列对齐以开始, 第二行以中心对齐, 第三行以结束对齐。

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

Ionic证明内容开始
Ionic调整含量中心
Ionic调整内容端
围绕Ionic调整含量
Ionic之间的合理含量

例

< ion-header> < ion-toolbar> < ion-title> Grid Example < /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="padding" color="light"> < ion-grid> < ion-row class="ion-justify-content-start"> < ion-col size="3"> < div> 1 of 2< /div> < /ion-col> < ion-col size="3"> < div> 2 of 2 < /div> < /ion-col> < /ion-row> < ion-row class="ion-justify-content-center"> < ion-col size="3"> < div> 1 of 2< /div> < /ion-col> < ion-col size="3"> < div> 2 of 2< /div> < /ion-col> < /ion-row> < ion-row class="ion-justify-content-end"> < ion-col size="3"> < div> 1 of 2< /div> < /ion-col> < ion-col size="3"> < div> 2 of 2< /div> < /ion-col> < /ion-row> < ion-row class="ion-justify-content-around"> < ion-col size="3"> < div> 1 of 2< /div> < /ion-col> < ion-col size="3"> < div> 2 of 2< /div> < /ion-col> < /ion-row> < ion-row class="ion-justify-content-between"> < ion-col size="3"> < div> 1 of 2< /div> < /ion-col> < ion-col size="3"> < div> 2 of 2< /div> < /ion-col> < /ion-row> < /ion-grid> < /ion-content>

输出量
运行Ionic应用程序时, 它将提供以下输出。

文章图片
网格尺寸 【Ionic网格】默认情况下, 网格占据屏幕的100％宽度。如果需要根据屏幕尺寸设置最大宽度, 请在< ion-grid> 元素中添加fixed属性。下表显示了不同的网格大小。

Name	值	描述
xs	100%	它不设置xs屏幕的网格宽度。
sm	540px	当（最小宽度：576px）时, 它将网格宽度设置为540px。
md	720px	当（最小宽度：768px）时, 它将网格宽度设置为720px。
lg	960px	当（最小宽度：992px）时, 它将网格宽度设置为960px。
xl	1140px	当（最小宽度：1200px）时, 它将网格宽度设置为1140px。