Flexboxを学んで分かったことまとめ

最近CSSのレイアウト手法「flexbox」を学んだので、
理解したこと・ハマりやすいポイントなどをまとめてみます。
これから学ぶ方の参考になればうれしいです。

---

1. Flexboxとは？

• Flexbox（フレックスボックス）は、要素を行または列に並べるための1次元レイアウト方法です。
• 特徴は「要素の大きさが分からなくても、空間をうまく使って柔軟に並べられる」こと。
• 今までのfloatやtableレイアウトに比べて、現代のWebレイアウトには必須のテクニックだと感じました。

---

2. 使い方の基本

• まずは入れ物（親要素）にdisplay: flex;を指定するだけでOK。

  .container {
    display: flex;
  }
  

あとは、子要素の並びや配置を細かくコントロールできます。

---

3. Flexboxの概念

主軸（main axis） と 交差軸（cross axis） という2つの軸の概念が重要。

• 主軸…基本の並び方向（横並び or 縦並び）
• 交差軸…主軸に対して直角の方向

---

4. よく使うプロパティ

- flex-direction: 主軸の方向を決める

• row（横並び・デフォルト）
• row-reverse
• column（縦並び）
• column-reverse

- justify-content: 主軸方向の配置

• flex-start（先頭寄せ／デフォルト）
• flex-end（末尾寄せ）
• center（中央寄せ）
• space-between（両端寄せ＋均等に間を空ける）
• space-around（均等に余白を取る）

- flex-wrap: 複数行（列）に分けるかどうか

• nowrap（折り返さない／デフォルト）
• wrap（折り返す）
• wrap-reverse

- align-items: 交差軸での配置

• flex-start
• flex-end
• center
• baseline

- align-content: 複数行（列）があるときの全体の配置

※flex-wrapが有効なときだけ効く

• flex-start
• flex-end
• center
• space-between

- align-self: 個別アイテムの交差軸での配置

• flex-start
• flex-end
• center

---

5. 各アイテムのサイズ・伸び縮み

余ったスペースをどう割り当てるか、足りないときにどう縮めるかを細かくコントロールできる。

• flex-basis（基本サイズを指定）
• flex-grow（余ったスペースをどれだけ伸ばすか）
• flex-shrink（スペースが足りないときにどれだけ縮めるか）

---

6. 実際に使ってみて感じたポイント

• とにかく親要素にdisplay: flexを忘れずに！（これを忘れると全く動かない）
• flex-directionの「主軸」「交差軸」をイメージできると、他のプロパティも直感的に使いやすい
• ちょっと複雑なレイアウトも、意外と少ないコードで実現できて便利
• align-contentは「複数行」のときにしか効かない点に注意

---

7. まとめ

flexboxはCSSレイアウトの強い味方です。
最初は用語や主軸・交差軸の考え方で混乱しましたが、「親にdisplay: flex」「主軸と交差軸を意識」さえ押さえれば、グッと使いこなせるようになると感じました。

---

参考リンク

• MDN Web Docs: Flexbox
• Flexbox Froggy（ゲームで学ぶflexbox）

---

おわりに

この記事がどなたかの参考になれば幸いです！
他にも学習メモを発信していきます。