演習

演習 1

MDN がいくつか演習問題を作ってくれています
フレックスボックスの振り返り的なのも含めてやってみましょう！

なお、おそらく結構難しいので無理に全部やる必要はないです

以下に matumoto の回答例も載せておきます

回答例：Task1

nav ul {
  display: flex;
  justify-content: space-between;
}

回答例：Task2

ul {
  display: flex;
}

li {
  flex: 1;
}

回答例：Task3

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
}

~~Task4 については自分でかんがえてみてね！(僕が解けてないので、もしいい感じにできたら教えてください 🙏🏻)~~
追記：たぶんいい感じに解けたので Task4 の回答例を追記しました

回答例：Task4

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  flex-grow: 1;
}

演習 1 が終わった人は、前回、前々回で取り組んだカウンターをどういう風にしたらより分かりやすい階層構造になるかを考えてみましょう！

counter