スタック

スタックは、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>