响应网格
Grid是一个强大的移动式FlexBox系统，用于构建自定义布局。它由三个单位组成 - a
这个怎么运作
<
离子网格
>
<
离子排
>
<
Ion-Col.
>
<
div
>
1中的第一个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
2的共有3个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3的3个
div
>
Ion-Col.
>
离子排
>
离子网格
>-
网格充当所有行和列的容器。网格占据了容器的全宽，但添加了
固定的属性将指定每个屏幕大小的宽度，请参阅 网格尺寸 以下。 - 行是水平组的列，该列将列正好向上。
- 内容应放在列中，只有列可以是行的直接行。
-
这
size- {breakpoint}属性表示每行使用默认12的列数。所以，size =“4”可以添加到列中以占用网格的1/3，或12列中的4个。 -
没有大小值的列将自动具有相同的宽度。例如，四个实例
尺寸-M对于小断点和向上，每个都会自动为25％。 - 列宽度设置为百分比，因此它们总是流体并相对于父元素大小。
-
列在各个列之间的填充，但是，可以通过添加来从网格和列中删除填充物
离子无填充课程到网格。看看CSS公用事业 对于可以应用于网格的更多样式。 - 有五个网格层，一个用于每个响应断点：所有断点（超小），小型，中等，大，大而超大。
-
网格层基于最小宽度，这意味着它们适用于它们的层和大于它们的所有这些（例如，
size-sm =“4”适用于小型，中，大，额外的大型设备）。 - Grids可以通过CSS变量轻松定制。看 自定义网格 。
生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
网格尺寸
默认情况下，网格将占用100％宽度。根据屏幕尺寸设置特定宽度，添加
固定的
属性。每个断点的网格的宽度定义在
- inion-grid-width- {断点}
CSS变量。有关更多信息，请参阅
自定义网格
。
| 姓名 | 价值 | 描述 |
|---|---|---|
| XS. | 100％ | 不要为XS屏幕设置网格宽度 |
| sm | 540px. | 将网格宽度设置为540px（min-宽度：576px） |
| m | 720px. | 当（min-width：768px）时将网格宽度设置为720px |
| LG. | 960px. | 将网格宽度设置为960px（min-宽度：992px） |
| XL. | 1140px. | 当（min-宽度：1200px）设置网格宽度至1140px |
生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
网格属性
默认情况下，网格占据屏幕的整个宽度。这可以使用下面的属性进行修改。
| 财产 | 描述 |
|---|---|
| 固定的 | 根据当前屏幕尺寸设置最大宽度。 |
默认断点
默认断点在下表中定义。此时无法定制断点。有关为什么无法自定义的更多信息，请参阅
| 姓名 | 价值 | 宽度前缀 | 偏移前缀 | 推送前缀 | 拉前缀 | 描述 |
|---|---|---|---|---|---|---|
| XS. | 0. |
尺寸- |
抵消- |
推- |
拉- |
设置列（min-width：0） |
| sm | 576px. |
size-sm- |
offset-sm- |
推 |
拉动 |
设置列时（min-width：576px） |
| m | 768px. |
尺寸-md- |
offset-md- |
推动MD- |
拉 - MD- |
设置列时（min-width：768px） |
| LG. | 992px. |
尺寸LG- |
offset-lg- |
推拉 - |
拉 - |
设置列（min-宽度：992px） |
| XL. | 1200px. |
size-xl- |
offset-xl- |
推XL- |
拉XL- |
（min-width：1200px）设置列 |
自动布局列
平等
默认情况下，列将占据所有设备和屏幕尺寸的行中的等于宽度。
<
离子网格
>
<
离子排
>
<
Ion-Col.
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
<
离子排
>
<
Ion-Col.
>
<
div
>
1中的第一个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
2的共有3个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3的3个
div
>
Ion-Col.
>
离子排
>
离子网格
>设置一个列宽度
设置一列的宽度，其他列将自动调整其大小。这可以使用我们的预定义网格属性来完成。在下面的示例中，无论中心列的宽度都将调整其他列。
<
离子网格
>
<
离子排
>
<
Ion-Col.
>
<
div
>
1中的第一个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
8.
“
>
<
div
>
2的3个（宽）
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3的3个
div
>
Ion-Col.
>
离子排
>
<
离子排
>
<
Ion-Col.
>
<
div
>
1中的第一个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
6.
“
>
<
div
>
2的3个（宽）
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3的3个
div
>
Ion-Col.
>
离子排
>
离子网格
>生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
可变宽度
通过设置
size- {breakpoint}
属性
“汽车”
该列可以基于其内容的自然宽度自身。这对于使用像素设置列宽非常有用。变量宽度列旁边的列将调整为填充行。
<
离子网格
>
<
离子排
>
<
Ion-Col.
>
<
div
>
1中的第一个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
汽车
“
>
<
div
>
可变宽度内容
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3的3个
div
>
Ion-Col.
>
离子排
>
<
离子排
>
<
Ion-Col.
>
<
div
>
1中的第1条
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
2中的2个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
汽车
“
>
<
div
>
<
离子输入
占位符
=
“
可变宽度输入
“
>
离子输入
>
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
4的4个
div
>
Ion-Col.
>
离子排
>
离子网格
>生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
响应性的属性
所有断点
要为所有设备和屏幕自定义列的宽度，请设置
尺寸
财产。此属性的值确定此列应从可用列中删除多少列。
<
离子网格
>
<
离子排
>
<
Ion-Col.
尺寸
=
“
4.
“
>
<
div
>
1中的第1条
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
2
“
>
<
div
>
2中的2个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
2
“
>
<
div
>
3中的3个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
4.
“
>
<
div
>
4的4个
div
>
Ion-Col.
>
离子排
>
离子网格
>堆放到水平
使用宽度和断点属性的组合来创建一个网格，然后在小屏幕上变为水平之前，从额外的小屏幕上堆放。
<
离子网格
>
<
离子排
>
<
Ion-Col.
尺寸
=
“
12.
“
尺寸-M
>
<
div
>
1中的第1条
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
12.
“
尺寸-M
>
<
div
>
2中的2个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
12.
“
尺寸-M
>
<
div
>
3中的3个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
12.
“
尺寸-M
>
<
div
>
4的4个
div
>
Ion-Col.
>
离子排
>
离子网格
>生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
重新排序
偏移列
通过添加右侧移动列
抵消
财产。此属性通过指定列的数量增加了列的边距。例如，在以下网格中，最后一列将偏移3列并占用3列：
<
离子网格
>
<
离子排
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
3.
“
抵消
=
“
3.
“
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
离子网格
>
也可以根据屏幕断点添加偏移量。这是一个网格的一个例子，最后一列将被3列偏移3列
m
屏幕和截止：
<
离子网格
>
<
离子排
>
<
Ion-Col.
尺寸MD.
=
“
3.
“
>
<
div
>
1中的第一个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸MD.
=
“
3.
“
>
<
div
>
2的共有3个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸MD.
=
“
3.
“
offset-md.
=
“
3.
“
>
<
div
>
3的3个
div
>
Ion-Col.
>
离子排
>
离子网格
>生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
推和拉
通过添加列来重新排序列
推
和
拉
特性。这些属性调整
剩下
和
正确的
列通过指定的列数，使其易于重新排序列。例如，在以下网格中的列中
1中的1分
描述实际上将是最后一列和
2的2
将是第一列。
<
离子网格
>
<
离子排
>
<
Ion-Col.
尺寸
=
“
9.
“
推
=
“
3.
“
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
3.
“
拉
=
“
9.
“
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
离子网格
>
也可以根据屏幕断点添加推动。在以下示例中，列具有
3的3个
列描述实际上是第一列
m
屏幕和截止：
<
离子网格
>
<
离子排
>
<
Ion-Col.
尺寸MD.
=
“
6.
“
推动MD.
=
“
3.
“
>
<
div
>
1中的第一个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸MD.
=
“
3.
“
推动MD.
=
“
3.
“
>
<
div
>
2的共有3个
div
>
Ion-Col.
>
<
Ion-Col.
尺寸MD.
=
“
3.
“
拉米
=
“
9.
“
>
<
div
>
3的3个
div
>
Ion-Col.
>
离子排
>
离子网格
>生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
结盟
垂直对齐
通过向行添加不同的类可以将所有列垂直对齐。有关可用类列表，请参阅
<
离子网格
>
<
离子排
班级
=
“
离子对齐 - 项目 - 开始
“
>
<
Ion-Col.
>
<
div
>
1中的第1条
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
2中的2个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3中的3个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
4的4个
<
布鲁斯
>
＃
<
布鲁斯
>
＃
<
布鲁斯
>
＃
div
>
Ion-Col.
>
离子排
>
<
离子排
班级
=
“
离子对齐物品中心
“
>
<
Ion-Col.
>
<
div
>
1中的第1条
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
2中的2个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3中的3个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
4的4个
<
布鲁斯
>
＃
<
布鲁斯
>
＃
<
布鲁斯
>
＃
div
>
Ion-Col.
>
离子排
>
<
离子排
班级
=
“
离子对齐物品结束
“
>
<
Ion-Col.
>
<
div
>
1中的第1条
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
2中的2个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
3中的3个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
4的4个
<
布鲁斯
>
＃
<
布鲁斯
>
＃
<
布鲁斯
>
＃
div
>
Ion-Col.
>
离子排
>
离子网格
>
列也可以通过将对齐类直接添加到列来与其他列相对对齐。有关可用类列表，请参阅
<
离子网格
>
<
离子排
>
<
Ion-Col.
班级
=
“
离子对齐 - 自我启动
“
>
<
div
>
1中的第1条
div
>
Ion-Col.
>
<
Ion-Col.
班级
=
“
离子对齐 - 自我中心
“
>
<
div
>
2中的2个
div
>
Ion-Col.
>
<
Ion-Col.
班级
=
“
离子对齐 - 自我结束
“
>
<
div
>
3中的3个
div
>
Ion-Col.
>
<
Ion-Col.
>
<
div
>
4的4个
<
布鲁斯
>
＃
<
布鲁斯
>
＃
<
布鲁斯
>
＃
div
>
Ion-Col.
>
离子排
>
离子网格
>生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
水平对齐
所有列可以通过向行添加不同的类水平对齐行。有关可用类列表，请参阅
<
离子网格
>
<
离子排
班级
=
“
离子合理 - 内容开始
“
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
<
离子排
班级
=
“
ION-JOWEDIFY-内容中心
“
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
<
离子排
班级
=
“
离子合理 - 内容结束
“
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
<
离子排
班级
=
“
离子合理的 - 内容 - 周围
“
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
<
离子排
班级
=
“
离子合理 - 内容 - 之间
“
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
1中的1分
div
>
Ion-Col.
>
<
Ion-Col.
尺寸
=
“
3.
“
>
<
div
>
2的2
div
>
Ion-Col.
>
离子排
>
离子网格
>生活实例
您可以在Angular中查看此目的示例 这里 和反应 这里 。
自定义网格
使用我们内置的CSS变量，可以自定义预定义的网格属性。更改填充的值，列数等。
列数
可以使用该网格列的数量进行修改
-ion-grid列
CSS变量。默认情况下，有12个网格列，但这可以更改为任何正整数，用于计算每个单个列的宽度。
-ion-grid列
：
12.
;网格填充
可以为所有断点设置网格容器上的填充物
-ion-Grid-Padding
CSS变量。要覆盖单个断点，请使用
--ion-grid-padding- {断点}
CSS变量。
-ion-Grid-Padding
：
5px.
;
-ion-grid-padding-xs
：
5px.
;
-ion-grid-padding-sm
：
5px.
;
-ion-grid-padding-md
：
5px.
;
-ion-grid-padding-lg
：
5px.
;
-ion-grid-padding-xl
：
5px.
;栅格宽度
要根据屏幕尺寸自定义固定网格的宽度值，覆盖值
- inion-grid-width- {断点}
对于每个断点。
-ion-grid-width-xs
：
100％
;
-ion-grid-width-sm
：
540px.
;
-ion-grid-width-md
：
720px.
;
-ion-grid-width-lg
：
960px.
;
-ion-grid-width-xl
：
1140px.
;柱填充
可以为所有断点设置列上的填充
-ion-grid-column-padding
CSS变量。要覆盖单个断点，请使用
--ion-grid-column-padding- {断点}
CSS变量。
-ion-grid-column-padding
：
5px.
;
-ion-grid-column-padding-xs
：
5px.
;
-ion-grid-column-padding-sm
：
5px.
;
-ion-grid-column-padding-md
：
5px.
;
-ion-grid-column-padding-lg
：
5px.
;
-ion-grid-column-padding-xl
：
5px.
;
