フレックスボックスについて(前回の補足)

前回の授業でフレックスボックスについて軽く触れましたが、実際にどう使うのかについての説明はほとんどをフレックスボックスのページに丸投げしていました

今回も基本的に参照する形で説明しますが、補足などはここに載せていきます

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

これは、フレックスボックスの「柔軟な箱としてレイアウトする要素を指定」の章の補足です

justify-content: centerなどのプロパティはフレックスコンテナーに沿って、フレックスアイテムの配置を決めます
つまり、フレックスコンテナーとフレックスアイテムが必要になるわけです

display: flexというプロパティによって、フレックスコンテナーとフレックスアイテムを作ることができます

例えば以下のように書くことで、クラスaiueoがフレックスコンテナー、クラスkakikukekoとsasisusesoがフレックスアイテムとなります

<div class="aiueo">
  <div class="kakikukeko"></div>
  <div class="sasisuseso"></div>
</div>

.aiueo {
  display: flex;
}

ここで重要なのは、フレックスコンテナーが親要素、フレックスアイテムが子要素であることを認識することです

例えばフレックスアイテムを中央揃えにしたいのであれば、justify-content: centerとalign-items: centerを使用するのがその方法の一つですが、それらはフレックスコンテナーに対して適用すべきです

<div class="aiueo">
  <div class="kakikukeko"></div>
  <div class="sasisuseso"></div>
</div>

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