Framer + RemixでWebサイトをつくる #4 - Stackの説明
引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。
サイトの要件などに興味ある方は1日目の記事をご覧ください。
4日目 - Stackをつかう前に色々説明
Stack はCSSで言うところのflexboxです。
横や縦にオブジェクトを積む様に並べることからStackということぽいです。
Stackオブジェクトをつくる
使い方は簡単です。次の二つの方法でStackオブジェクトをつくることができます。
Frameからつくる
最初にFrameを作成し、右のコンパネにあるStackの+ボタンをクリックでそのFrameをStackオブジェクトにすることができます。
Shift + S コマンドでつくる
Shift + Sコマンドにするとマウスカーソルが代わります。そのままドラッグ&ドロップでStackコンポーネントを作成することができます。
Stackのレイアウトとプロパティ
子要素の配置
StackにはFrameやコンポーネントを入れ子にできます。
デフォルトだと横方向に積む様になっているので、二個目以降のデザインオブジェクトか他コンポーネントは1つ目のそれの右隣りに配置されます。
また、右のコンパネにあるDirectionをたて方向に切り替えるとレイアウトの方向も横からたてに切り替わります。
Heightが固定値なので親のStackからはみ出ます。
この時にflexboxと同様に配置の揃えDistributeを中央寄せCenterにすると2つのオブジェクトの中央点が親のStackの中央点に合わせて中央寄せになります。
といった様にたて横の切り替えと配置の揃えが簡単に指定できます。配置の揃えDistributeの値はCSSのflexboxのjustify-content（横方向の揃え）と名前がほぼ同じです。
| Distribute | justify-content | 説明 | レイアウト |
|---|---|---|---|
| Start | flex-start |
左寄せ |  |
| Center | center |
中央寄せ |  |
| End | flex-end |
右寄せ |  |
| Space Between | space-between |
最初・最後を両端に配置しほかは均等 |  |
| Space Around | space-around |
全体的に均等 |  |
| Space Evenly | - | 均等配置のまま中央寄せ |  |
子要素のたて横サイズの可変
Stackの子要素のサイズ（たて横）には Fixed（px）, Relative(%), Auto(孫要素の横幅)を指定できますが、さらにFraction(fr)も指定できます。CSSでもFraction（分数）を使えますがそれと同じです。
例えば以下の条件の場合、
- Stackのwidthが
300px - Frame Aのwidthを
1fr - Frame Bのwidthを
64px
この場合のFrame Aの横幅は自動で 300px - 64px = 236px ということでレンダリングされます。
当然、親のStackコンポーネントの横幅が変わると中央の位置は変わります。つまり、親のStackコンポーネントが画面全体の横幅と同じ幅をもっていていればレスポンシブにも対応できるので、この場合は親のStackコンポーネントのwidthを100%に設定することで実現できます。CSSと同じですね。
PaddingとGap
StackにはCSSでいう paddingやgap 的なものを設定できます。
Padding
Stackに Padding プロパティが用意されています。Paddingを付与するとStackの中に指定の値の余白を設けることができます。
また、Paddingは上下左右に均一に設定もできるし、それぞれに値を設定することもできます。
Gap
Stackに Gap プロパティが用意されています。Distribute がStart, Center, Endの場合にのみ設定できる子要素間のスペースです。
今回は長くなったので、次回はStackを使ってレイアウトを組んでいきます。
Discussion