ion-col

Columnは grid system のセルとなるコンポーネントで、行の内側に入ります。 row を埋めるように展開されます。グリッド内のすべてのコンテンツは、Columnの内側に配置する必要があります。

詳しくは Grid Layout をご覧ください。

Column attributes

デフォルトでは、column は行の高さ全体に合わせて伸縮します。この動作をカスタマイズするために、column に追加できる属性がいくつかあります。

Property	Description
align-self-start	Adds `align-self: flex-start`. The column will be vertically aligned at the top.
align-self-center	Adds `align-self: center`. The column will be vertically aligned in the center.
align-self-end	Adds `align-self: flex-end`. The column will be vertically aligned at the bottom.
align-self-stretch	Adds `align-self: stretch`. The column will be stretched to take up the entire height of the row.
align-self-baseline	Adds `align-self: baseline`. The column will be vertically aligned at its baseline.

プロパティ

offset
Description	The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
Attribute	`offset`
Type	`string \| undefined`
offsetLg
Description	The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`offset-lg`
Type	`string \| undefined`
offsetMd
Description	The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`offset-md`
Type	`string \| undefined`
offsetSm
Description	The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`offset-sm`
Type	`string \| undefined`
offsetXl
Description	The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`offset-xl`
Type	`string \| undefined`
offsetXs
Description	The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`offset-xs`
Type	`string \| undefined`
pull
Description	The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
Attribute	`pull`
Type	`string \| undefined`
pullLg
Description	The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
Attribute	`pull-lg`
Type	`string \| undefined`
pullMd
Description	The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
Attribute	`pull-md`
Type	`string \| undefined`
pullSm
Description	The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
Attribute	`pull-sm`
Type	`string \| undefined`
pullXl
Description	The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
Attribute	`pull-xl`
Type	`string \| undefined`
pullXs
Description	The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
Attribute	`pull-xs`
Type	`string \| undefined`
push
Description	The amount to push the column, in terms of how many columns it should shift to the end of the total available.
Attribute	`push`
Type	`string \| undefined`
pushLg
Description	The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`push-lg`
Type	`string \| undefined`
pushMd
Description	The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`push-md`
Type	`string \| undefined`
pushSm
Description	The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`push-sm`
Type	`string \| undefined`
pushXl
Description	The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`push-xl`
Type	`string \| undefined`
pushXs
Description	The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
Attribute	`push-xs`
Type	`string \| undefined`
size
Description	The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
Attribute	`size`
Type	`string \| undefined`
sizeLg
Description	The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
Attribute	`size-lg`
Type	`string \| undefined`
sizeMd
Description	The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
Attribute	`size-md`
Type	`string \| undefined`
sizeSm
Description	The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
Attribute	`size-sm`
Type	`string \| undefined`
sizeXl
Description	The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
Attribute	`size-xl`
Type	`string \| undefined`
sizeXs
Description	The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
Attribute	`size-xs`
Type	`string \| undefined`

CSSカスタムプロパティ

Name	Description
`--ion-grid-column-padding`	Padding for the Column
`--ion-grid-column-padding-lg`	Padding for the Column on lg screens and up
`--ion-grid-column-padding-md`	Padding for the Column on md screens and up
`--ion-grid-column-padding-sm`	Padding for the Column on sm screens and up
`--ion-grid-column-padding-xl`	Padding for the Column on xl screens and up
`--ion-grid-column-padding-xs`	Padding for the Column on xs screens and up
`--ion-grid-columns`	The number of total Columns in the Grid

ion-col

Column attributes

プロパティ

offset

offsetLg

offsetMd

offsetSm

offsetXl

offsetXs

pull

pullLg

pullMd

pullSm

pullXl

pullXs

push

pushLg

pushMd

pushSm

pushXl

pushXs

size

sizeLg

sizeMd

sizeSm

sizeXl

sizeXs

CSSカスタムプロパティ