# スタック

スタックは、Flexboxユーティリティを基盤としたショートカットヘルパーで、コンポーネントレイアウトをより速く簡単に作成できるようにします。

## 垂直スタック

`.%{STYLEGUIDE_PAGE}-stack`または`.%{STYLEGUIDE_PAGE}-vstack`を使用して垂直レイアウトを作成します。スタックされたアイテムはデフォルトで全幅になります。`.%{STYLEGUIDE_PAGE}-gap-*`ユーティリティを使用してアイテム間にスペースを追加できます。

First item
Second item
Third item

    <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-*`ユーティリティを使用してアイテム間にスペースを追加できます。

First item
Second item
Third item

    <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`などの水平マージンユーティリティをスペーサーとして使用：

First item
Second item
Third item

    <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プロパティを適用します：

クラス | 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変数

スタックの間隔はCSS変数`--acms-stack-spacing`でカスタマイズできます：

First item
Second item
Third item

    <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>