ボックスのレイアウト：配置

Studioではボックスレイアウトを採用し、ボックス要素を積み重ねてページを構成します。レイアウトを調整するには、親ボックスの方向や子ボックスの配置を設定します。

ボックスの配置は、スクリーン上の方向・配置メニューか、右パネルの[ボックス]タブ内の[方向][配置]セクションから設定を行います。

※子ボックスがないボックスでは、メニューは表示されません。

リストやコンポーネントなどの要素は、編集モードにすることでメニューが操作できます。

ボックスの並ぶ方向は、矢印の方向アイコンで設定します。矢印の起点方向から、ボックス要素が配列します。右パネルで、[ボックス]タブ内の[方向]からも設定が可能です。

折り返しアイコンを選択すると、ボックスの自動折り返しが設定されます。親ボックスの幅が狭くなり子ボックスが収まらなくなると、自動で次の行に折り返されます。

矢印の方向アイコンの右横にあるアイコンで、ボックスの配置（整列）設定をします。右パネルで、[ボックス]タブ内の[配置]からも設定が可能です。

水平方向・垂直方向それぞれでの配置を指定します。

均等配分は親要素内の子要素を均等な間隔で並べる設定で、子要素間の余白を自動で調整したい場合に利用します。

均等( space-between ) は、子要素を両箸に寄せて配置する配分です。

一方で、均等（余白含む） ( space-around ) は、両端に余白を含めて間隔を配分します。

両端揃え ( stretch ) は、要素の高さが親要素の高さに合わせて自動的に伸びる設定です。

子要素の高さにばらつきがある場合に利用すると、親要素の高さに応じて子要素の高さが調整されます。