ColumnsLayout レイアウトコンテナ

レイアウトコンテナを使用すると、カラム分割のレイアウトを実現できます。コンポーネントはデフォルトで12カラムに分けられ、さまざまなレイアウト方法が事前設定されています。また、カスタムレイアウトもサポートしています。携帯電話では1行につき最大4カラムしかサポートされず、4カラムを超えると改行され、改行後は横方向にいっぱいになります。

• これはコンポーネントの基本的な使用方法です。1行を等しい3カラムに分け、カラム間の間隔が15pxのときの効果を示しています。これはデザインモードで直接変更できます。
• カスタム行列表示の使い方です。右側の設定の「レイアウト-カスタム行列」で各カラムの比率値を入力できます。フォーマットは 2:2:2:2:4 です。
• 複数行表示の使い方です。右側の設定の「レイアウト-カスタム行列」で各カラムの比率値を入力できます。フォーマットは 2:2:2:2:4:6:6 です。 比率の合計が12を超えると新しい行にレンダリングされます。合計は常に12の倍数になるようにすることをお勧めします。複数行の場合、 行間隔（上下の間隔）を設定する必要があるかもしれません。

いつ使用するか

• ページまたはブロックをカラム分割レイアウトする必要がある場合に使用します。

コンポーネント例

コンポーネントプロパティ

属性	说明	类型	默认值
columnGap	カラム間の間隔を設定	number	0
display	携帯電話のカラム配置方法	'VERTICAL' | 'HORIZONTAL'	'VERTICAL'
layout	カラム構成。各行を何カラムに分けるか、各カラムが何マス分を占めるか	string	'6:6'
mobileRowGap	携帯電話の垂直配置時の行間隔	string	'16px'
rowGap	複数行カラムのシナリオで、カラム間の行間隔を設定	number	0