要素の整列は、

  • 進行方向の整列
  • 垂直方向の整列

の2種類あります。


以下では、親要素の進行方向を横(→)と縦(↓)にした場合の設定方法の違いを、具体的に解説します。

進行方向が横(→)の場合

■ 進行方向の整列 

まずは、子要素の進行方向が横(→)の場合の例を見てみましょう。
横向き(→)の場合は、親要素の上部にあるメニューから進行方向の整列を指定できます。

【子要素が横並びの時(→)の進行方向の整列の種類】

進行方向の整列は5通り設定できます。

  • 進行方向の起点に要素を揃える
  • 中央寄せ
  • 進行方向の終点に要素を揃える
  • 均等に配置する
  • 端にも隙間を空け均等に配置する

■ 垂直方向の整列 

次に、垂直方向の整列をみてみましょう。

進行方向が横(→)向きの場合、垂直方向の整列は親要素の左にあるメニューで設定できます。

Tips: 垂直方向の整列は、進行方向に対して子要素を垂直に整列する方法です。

【子要素が横並びの時(→)の垂直方向の整列の種類】

垂直方向の整列は3通り設定できます。

  • 進行方向に対し左側に寄せる
  • 中央に寄せる
  • 進行方向に対し右側に寄せる


進行方向が縦(↓)の場合

次に、子要素の進行方向が縦(↓)の場合の例を見てみましょう。

※ Tips: 横(→)とは進行方向の向きが変わるので、整列方法を選択するメニューの位置と向きが異なります。

■ 進行方向の整列 

縦並びの場合、進行方向の整列のメニューは親要素の左側にあります。整列方法は横並びの時と同じく、5通り設定できます。

■ 垂直方向の整列 

子要素が縦並び(↓)の場合、垂直方向のメニューは親要素の上部にあります。整列方法は、横並びの時と同じく3通り設定できます。

Did this answer your question?