lightning:layout

lightning:layout は、ページ内または別のコンテナ内でコンテナを配置するための柔軟なグリッドシステムです。デフォルトのレイアウトはモバイルファーストで、異なるデバイスで動作するように簡単に設定できます。

レイアウトは、次の属性を設定することによってカスタマイズできます。

• horizontalAlign="center": この属性は、レイアウト項目を横方向に間隔なしで並べ、そのグループをコンテナの中央に配置します。
• horizontalAlign="space": レイアウト項目はコンテナ内で横方向に間隔を空けて配置されます。最初と最後にも間隔を空けます。
• horizontalAlign="spread": レイアウト項目はコンテナ内で横方向に間隔を空けて配置されます。最初と最後はレイアウト項目になります。
• horizontalAlign="end": レイアウト項目はグループ化されてコンテナの右側に横方向に配置されます。
• verticalAlign="start": レイアウト項目はコンテナの上部に配置されます。
• verticalAlign="center": レイアウト項目はコンテナの中央に配置されます。
• verticalAlign="end": レイアウト項目はコンテナの下部に配置されます。
• verticalAlign="stretch": レイアウト項目はコンテナの縦いっぱいに広げて配置されます。
• pullToBoundary: レイアウト項目にパディングが使用されている場合、この属性はコンテナの両側にある要素を境界線まで寄せます。layoutItem の padding に対応するサイズを選択します。たとえば、lightning:layoutItem="horizontalSmall" であれば pullToBoundary="small" を選択します。

スタイル設定を別の方法でカスタマイズするには class 属性または multipleRows 属性を使用します。

レイアウト項目を lightning:layout で囲むと、シンプルなレイアウトが完成します。次に例を示します。

1<aura:component>
2    <div class="c-container">
3        <lightning:layout horizontalAlign="space">
4            <lightning:layoutItem flexibility="auto" padding="around-small">
5                1
6            </lightning:layoutItem>
7            <lightning:layoutItem flexibility="auto" padding="around-small">
8                2
9            </lightning:layoutItem>
10            <lightning:layoutItem flexibility="auto" padding="around-small">
11                3
12            </lightning:layoutItem>
13            <lightning:layoutItem flexibility="auto" padding="around-small">
14                4
15            </lightning:layoutItem>
16        </lightning:layout>
17    </div>
18</aura:component>

属性