Flexbox の縦並びとレスポンシブ切り替えを学ぼう

前のページでは、

• display: flex
• gap
• justify-content
• align-items

を使って、

横並びレイアウト

を作りました。

今回は、

• 縦並び
• flex-direction
• スマホとPCで並びを切り替える方法

を学んでいきます

---

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

---

flex-direction とは？

flex-direction は、

並ぶ方向

を決めるCSSです。

---

通常の Flexbox

前回の状態では、

display: flex;

を書いていました。

この状態では、

横並び

になります。

これは、

flex-direction: row;

が初期状態だからです。

---

row の意味

flex-direction: row;

は、

横方向へ並べる

という意味です。

---

縦並びにしてみよう

例えば、

.flex-box {
  display: flex;

  flex-direction: column;
}

を書くと、

縦並び

になります。

---

実際に試してみよう

<div class="flex-box">

  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>

</div>

.flex-box {
  display: flex;

  flex-direction: column;

  gap: 16px;
}

保存してブラウザを確認してください。

要素が縦方向へ並ぶはずです。

---

gap は縦でも使える

gap は、

横並び専用

ではありません。

縦並びでも、

要素間の余白

として使えます。

---

row と column のイメージ

row

→ → →

横方向

---

column

縦方向

---

実際のWeb制作では切り替えることが多い

例えば、

• PCでは横並び
• スマホでは縦並び

にしたいことが非常によくあります。

---

メディアクエリと組み合わせよう

例えば、

.flex-box {
  display: flex;

  gap: 16px;
}

だと、常に横並びです。

---

スマホでは縦並びにする

.flex-box {
  display: flex;

  gap: 16px;
}

@media (max-width: 768px) {

  .flex-box {
    flex-direction: column;
  }

}

を書くと、

• PCでは横並び
• スマホでは縦並び

になります。

---

なぜこれが重要なの？

スマホは横幅が狭いため、

横並びのままだと苦しい

ことがあります。

そのため、

スマホだけ縦並び

へ切り替えることが非常によくあります。

---

---

実際によくある例

例えば、

• 画像 + 文章
• カード一覧
• ボタン群
• メニュー

などは、

• PCでは横並び
• スマホでは縦並び

が非常によく使われます。

---

Flexbox は「親」に書く

初心者が混乱しやすいポイントですが、

display: flex;

は、

並べたい要素の親

へ書きます。

---

イメージ

<div class="parent">

  <div>子1</div>
  <div>子2</div>
  <div>子3</div>

</div>

この場合、

.parent {
  display: flex;
}

を書きます。

---

子要素へ書くわけではない

初心者は最初、

子要素へ flex を書いてしまう

ことがあります。

しかし、

「並べる側」

へ書くのがポイントです。

---

---

今回学んだこと

今回学んだこと：

• flex-direction
• row
• column
• メディアクエリとの組み合わせ
• スマホだけ縦並び

などです。

---

次のページでは

次のページでは、

• width
• max-width
• margin: 0 auto

を使って、

「中央寄せレイアウト」

を作る方法を学んでいきます