ionic Chinese tutorial /ionic 网格(Grid)

ionic 网格(Grid)

ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端,基本上的手机都支持。row 样式指定行,col 样式指定列。

同等大小网格

在带有 row 的样式的元素里如果包含了 col 的样式,col 就会设置为同等大小。

以下实例中 row 的样式包含了 5 个 col 样式,每个 col 的宽度为 20%。

.col
.col
.col
.col
.col


指定列宽

你可以设定一行中各个列的大小不一样。默认情况下,列都会被划分为同等大小。但你也可以按百分比来设置列的宽度(一行为 12 个网格)。

.col.col-50
.col
.col
.col.col-75
.col
.col
.col.col-75
.col
.col


注意:实例中,每个 col 样式会自动添加上边框和灰色背景。

下面列出了指定列宽的一些百分比的样式名:

.col-10 10%
.col-20 20%
.col-25 25%
.col-33 33.3333%
.col-50 50%
.col-67 66.6666%
.col-75 75%
.col-80 80%
.col-90 90%

有偏移量的网格

列可以设置左侧偏移量,实例如下:

.col
.col
.col
.col
.col


下面是一些百分比的偏移量样式名:

.col-offset-10 10%
.col-offset-20 20%
.col-offset-25 25%
.col-offset-33 33.3333%
.col-offset-50 50%
.col-offset-67 66.6666%
.col-offset-75 75%
.col-offset-80 80%
.col-offset-90 90%

纵向对齐网格

弹性盒子模型可以很容易设置列纵向对齐。纵向对齐包含顶部,中间部分,底部,可以应用到每一行的列,或者指定的某列。

实例中,最后一列设置了最高的内容用于更好的演示纵向对齐网格。

.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4



响应式网格

手持设备屏幕在切换时,例如横屏,竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。

不同设备响应式类的样式如下:

响应式类 描述
.responsive-sm 小于手机横屏
.responsive-md 小于平板竖屏
.responsive-lg 小于平板横屏
.col
.col
.col
.col