フレックスボックスの理解

知識課題

知識課題１

フレックスボックスとは何かについて調査し、以下の点を含めて説明してください。

• フレックスコンテナー
• フレックスアイテム

知識課題2

以下のフレックスコンテナーのプロパティについて調査し、それぞれの役割を説明してください。

• flex-direction
  • row
  • column
  • row-reverse
  • column-reverse
• flex-wrap
  • nowrap
  • wrap
  • wrap-reverse
• flex-flow
• justify-content
  • center
  • flex-start
  • flex-end
  • space-around
  • space-between
  • space-evenly
• align-items
  • center
  • flex-start
  • flex-end
  • stretch
  • baseline
  • normal
• align-content
  • center
  • stretch
  • flex-start
  • flex-end
  • space-around
  • space-between
  • space-evenly

知識課題3

以下のフレックスアイテムのプロパティについて調査し、それぞれの役割を説明してください。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

実践課題

Flexbox Froggyをプレイして、すべてのレベルをクリアしてください。ゲームを通じて、フレックスボックスの使い方を実践的に学びましょう。