こばゆた
今回は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
こばゆた
上のまとめで動きのイメージを覚えておくのが良いと思います
コメント