次にフレックスボックスの親要素について勉強していきましょう。
前回のフレックスボックスについてはこちら▶https://qiita.com/akari_0618/items/080dad83a550ea439fd2
親要素に当てるフレックスボックス
少し複雑になるので整理しながらやっていきましょう。
まず出てくるのは
①flex-direction
主軸の方向や向きを決めるプロバティです！
style.css
.container {
background-color: crimson;
display: flex;
flex-direction: row;
}
.case1 {
background-color: aqua;
width: 30%;
}
.case2 {
background-color: burlywood;
width: 30%;
}
.case3 {
background-color: cornflowerblue;
width: 30%;
}
１．flex-direction;row
ブラウザで表示すると変わらないように見えますのでスクショは省きますが、
これだと主軸は箇条書きリストで向きは左に向かっていきます。
2.flex-direction:column;
に変えてみましょう！
積み重なっているのがわかりますかね！この場合は主軸が箇条書きリストから始まって下に続いて行きます！
ちなみにそれぞれにreverseという値がありますが、これはそれぞれ反対なので自分でやってみましょう！
justify-content
中身のアイテムの間や周囲に間隔を配置する方法を定義します!
flex-directionの下にかきます。
style.css
.container {
background-color: crimson;
display: flex;
flex-direction: row;
justify-content: space-between;
}
1.space-between
要素の間が空きます！
2.center
真ん中に寄ります！
3.space-around
space-betweenとの違いがわかりにくいですが、端も空いてる部分ですね！
4.space-evenly
③align-items
こちらは子要素に直接当てるようです。もしこの子が当たんなかった場合はcontainerに高さをセットすればいいみたいです！
1.center
2.start
3.end
align-item は少し私も不安がありますが今、コードがこの状態なので、おそらく主軸が左で交差軸が上？になってるのかな？笑
style.css
.container {
background-color: crimson;
display: flex;
flex-direction:row;
justify-content: space-around;
align-items: flex-end;
height: 200px;
}