主軸方向の位置を決めるjustify-contentと交差軸方向の位置を決めるalign-items【Flexbox】

こばゆた

今回はFlexboxにおいての主軸方向の並びと交差軸方向の並びについて解説します

チャッピー

主軸と交差軸が大事って言ってたよね

こばゆた

そうだね

前回横並びにすることを学んだけど今回はその並んだ子要素を「どう動かすか」を見ていこうと思います

1.主軸方向”justify-contentプロパティ”

justify-contentプロパティは主軸方向の並びを指定します。

セレクター{
  display: flex;
  justify-content: 値;
}

ここからはjustify-contentの値の違いについてみていこうと思います。

1-1.flex-start

主軸方向に始点揃いに配置します。

ちなみにこちらは初期値になるので目に見える変化はありません。

.container{
  display: flex;
  justify-content: flex-start;
}

1-2.center

主軸方向に中央揃いに配置します。

.container{
  display: flex;
  justify-content: center;
}

1-3.flex-end

主軸方向に終点揃いに配置します。

.container{
  display: flex;
  justify-content: flex-end;
}

1-4.space-between

主軸方向にまず子要素を両端を配置してから残りの子要素を均等に配置します。

.container{
  display: flex;
  justify-content: space-between;
}

1-5.space-around

こちらは主軸方向の余白も含め均等配置します。

.container{
  display: flex;
  justify-content: space-around;
}

2.交差軸方向”align-itemsプロパティ”

align-itemsプロパティは交差軸方向の並びを指定します。

セレクター{
  display: flex;
  align-items: 値;
}

2-1.flex-start

交差軸方向に始点揃いに配置します。
こちらは初期値なので変化はありません。

.container{
  display: flex;
  align-items: flex-start;
}

2-2.center

交差軸方向に中央揃いに配置します。

.container{
  display: flex;
  align-items: center;
}

2-3.flex-end

交差軸方向に終点揃いに配置します。

.container{
  display: flex;
  align-items: flex-end;
}

2-4.stretch

交差軸方向に親要素の高さいっぱいに伸びます(stretchする)。また子要素に高さを指定していない時に限ります。

.container{
  display: flex;
  align-items: stretch;
  height: 150px;
}

justify-contentプロパティとalign-itemsプロパティはそれぞれ余白がある時のみ機能します。

例として交差軸方向に余白がないもので試してみます。

.container{
  display: flex;
  align-items: stretch;
}

aaa

bbb

ccc

ddd

こばゆた

余白がないので何の変化もありません

3.主軸を変えたときの動き

ここまでの注意としましては「横方向の整列がjustify-content、縦方向の整列がalign-items」と安易に覚えてしまうのは危険です。

コチラの記事でflex-directionが主軸の向きを決めるということを学習しました。

ここではflex-directionで軸を変えたときにjustify-content、align-itemsの値を変更したらどうなるかについても見ておきましょう。

以下の図のボタンをクリックすると軸とjustify-content、align-itemsの値が変わる様になっております。

実際に動かしてみて確認するとイメージがわかりやすいのではと思います。(PC推奨)

See the Pen Untitled by kbyt (@kbo58) on CodePen.

4.まとめ

セレクター{
  display: flex;
  justify-content: 値;
}

セレクター{
  display: flex;
  align-items: 値;
}