スタックは、Flexboxユーティリティを基盤としたショートカットヘルパーで、コンポーネントレイアウトをより速く簡単に作成できるようにします。
.%{STYLEGUIDE_PAGE}-stackまたは.%{STYLEGUIDE_PAGE}-vstackを使用して垂直レイアウトを作成します。スタックされたアイテムはデフォルトで全幅になります。.%{STYLEGUIDE_PAGE}-gap-*ユーティリティを使用してアイテム間にスペースを追加できます。
<div class="%{STYLEGUIDE_PAGE}-vstack %{STYLEGUIDE_PAGE}-gap-3">
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">First item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">Second item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">Third item</div>
</div>
.%{STYLEGUIDE_PAGE}-hstackを使用して水平レイアウトを作成します。スタックされたアイテムはデフォルトで垂直方向に中央揃えされ、必要な幅のみを占めます。.%{STYLEGUIDE_PAGE}-gap-*ユーティリティを使用してアイテム間にスペースを追加できます。
<div class="%{STYLEGUIDE_PAGE}-hstack %{STYLEGUIDE_PAGE}-gap-3">
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">First item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">Second item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">Third item</div>
</div>
.%{STYLEGUIDE_PAGE}-ms-autoなどの水平マージンユーティリティをスペーサーとして使用:
<div class="%{STYLEGUIDE_PAGE}-hstack %{STYLEGUIDE_PAGE}-gap-3">
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">First item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel %{STYLEGUIDE_PAGE}-ms-auto">Second item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">Third item</div>
</div>
スタッククラスは以下のCSSプロパティを適用します:
| クラス | CSSプロパティ | 説明 |
|---|---|---|
| .%{STYLEGUIDE_PAGE}-stack .%{STYLEGUIDE_PAGE}-vstack |
display: flex;flex-flow: column nowrap;gap: var(--acms-stack-spacing, 0.5rem);align-items: center;
|
垂直方向のスタックレイアウト |
| .%{STYLEGUIDE_PAGE}-hstack |
display: flex;flex-flow: row nowrap;gap: var(--acms-stack-spacing, 0.5rem);align-items: center;
|
水平方向のスタックレイアウト |
スタックの間隔はCSS変数--acms-stack-spacingでカスタマイズできます:
<div class="%{STYLEGUIDE_PAGE}-stack" style="--acms-stack-spacing: 2rem;">
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">First item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">Second item</div>
<div class="%{STYLEGUIDE_PAGE}-p-2 panel">Third item</div>
</div>