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

こばゆた
こばゆた

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

チャッピー
チャッピー

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

こばゆた
こばゆた

そうだね

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

スポンサーリンク

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

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

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

1-1.flex-start

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

きなこ
きなこ

“display: flex;”だと”flex-directionプロパティ”の初期値が”row;”だから主軸は横方向だったよね

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

.container{
  display: flex;
  justify-content: flex-start;
}
aaa
bbb
ccc
ddd

1-2.center

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

.container{
  display: flex;
  justify-content: center;
}
aaa
bbb
ccc
ddd

1-3.flex-end

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

.container{
  display: flex;
  justify-content: flex-end;
}
aaa
bbb
ccc
ddd

1-4.space-between

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

.container{
  display: flex;
  justify-content: space-between;
}
aaa
bbb
ccc
ddd

子要素を6つにしてもこんな感じです。

aaa
bbb
ccc
ddd
eee
fff

1-5.space-around

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

.container{
  display: flex;
  justify-content: space-around;
}
aaa
bbb
ccc
ddd

こちらも子要素を増やしてもこんな感じです。

aaa
bbb
ccc
ddd
eee
fff
スポンサーリンク

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

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

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

2-1.stretch

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

.container{
  display: flex;
  align-items: stretch;
  height: 150px;
}
aaa
bbb
ccc
ddd

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

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

.container{
  display: flex;
  align-items: stretch;
}
aaa
bbb
ccc
ddd
こばゆた
こばゆた

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

2-2.flex-start

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

.container{
  display: flex;
  align-items: flex-start;
}
aaa
bbb
ccc
ddd

2-3.center

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

.container{
  display: flex;
  align-items: center;
}
aaa
bbb
ccc
ddd

2-4.flex-end

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

.container{
  display: flex;
  align-items: flex-end;
}
aaa
bbb
ccc
ddd

3.まとめ

justify-contentまとめ
aaa
bbb
ccc
ddd
flex-start
center
flex-end
space-between
space-around

align-itemsまとめ
aaa
bbb
ccc
ddd
stretch
flex-start
center
flex-end

こばゆた
こばゆた

上のまとめで動きのイメージを覚えておくのが良いと思います

コメント