次にフレックスボックスの親要素について勉強していきましょう。
前回のフレックスボックスについてはこちら▶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;
}