ボックスのレイアウト：配列方向と配置

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

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

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

配置調整をしたいボックスの親ボックスを選択すると、上部にメニューが表示されます。

ボックスの並ぶ方向は、矢印の方向アイコンで設定します。

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

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

ボックス内の子ボックスを横並び・縦並びにしたとき、それぞれで選択できる配置設定は次のとおりです。

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

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

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

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

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