Col
ion-col, [ion-col]
列是网格系统的蜂窝组件，并进入一行。 他们将扩大填补他们的行。 网格内的所有内容都应该在列中
Col 属性
默认情况下，列将展开以填充行的整个高度。 可以将几个属性添加到列中以自定义此行为。
| 属性 | 描述 |
|---|---|
| align-self-start | Addsalign-self: flex-start. The column will be vertically aligned at the top. |
| align-self-center | Addsalign-self: center. The column will be vertically aligned in the center. |
| align-self-end | Addsalign-self: flex-end. The column will be vertically aligned at the bottom. |
| align-self-stretch | Addsalign-self: stretch. The column will be stretched to take up the entire height of the row. |
| align-self-baseline | Addsalign-self: baseline. The column will be vertically aligned at its baseline. |
Sass 变量
All
| 属性 | 默认值 | 描述 |
|---|---|---|
$grid-breakpoints |
( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) |
The minimum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries |
$grid-max-widths |
( sm: 540px, md: 720px, lg: 960px, xl: 1140px ) |
Maximum width of the grid for different screen sizes |
$grid-columns |
12 |
Number of columns for the grid |
$grid-padding-width |
10px |
Total width of the padding for the grid |
$grid-padding-widths |
( xs: $grid-padding-width, sm: $grid-padding-width, md: $grid-padding-width, lg: $grid-padding-width, xl: $grid-padding-width ) |
Padding for the columns for different screen sizes |