並べ方｜縦積みと横並び

ボックスは、中に入っている子を縦に積むか、横に並べるかを選べます。Studioのレイアウトは、この2択の組み合わせでほとんど成立しています。ここが分かると、たいていのレイアウトは分解して考えられるようになります。

2つの並べ方

カード3枚を横に並べたいなら、親ボックスを「横並び」にして、その中にカードを3つ入れるという手順です。カード側では何も設定しません。

横並びを選ぶときの注意

横並びは見栄えがしますが、画面幅が狭くなったときに必ず問題になります。PC幅で3枚並べたものは、スマホ幅ではそのままだと潰れます。この対処は第3章で扱いますが、作る時点で意識しておくと後が楽です。

折り返しという選択肢

横並びには、入りきらない子を次の行へ折り返す設定もあります。カードが4枚・6枚と増える一覧では、これを使うと画面幅に応じて自動的に段が変わります。件数が固定でない箇所に向いています。

次は、並べた要素の位置を決める揃えと配置です。