TailwindCSS flex-direction テクニック三選｜row・col・reverseの落とし穴

TailwindCSS flex-direction の使い方で困っていませんか？flex-col にしたら配置がおかしい、reverse を使ったらスペースがズレる…。この記事では、flex-direction でよくある3つの落とし穴と解決策を紹介します。

この記事で学べること

TailwindCSS flex-direction（flex-row、flex-col、flex-row-reverse、flex-col-reverse）を使っていて、「なぜか思った通りにならない」と感じたことはありませんか？

この記事では、flex-direction でよくある3つの誤解と、その解決策を紹介します。

• flex-col で justify-center が横方向に効かない理由
• flex-row-reverse で space-x がズレる原因と対処法
• flex-col-reverse で justify-start が下寄せになる仕組み

実際のコード例と画像で解説するので、同じ問題で悩んでいる方はぜひ参考にしてください。

---

【体験談】私も最初は軸の概念がわかりませんでした

私も flex-direction でたくさん躓いた経験があります。

特に最初のうちは「軸」についての概念を把握していなかったので、flex-row のつもりで flex-col の調整をしても、うまくいかないことがたくさんありました。

Tailwind Play で何回も書いているうちに、やっと「なんか軸っぽいものがある」ことに気づいて、そこから一気にわかるようになりました。

この記事では、私が躓いたポイントを整理してお伝えします。同じように悩んでいる方の参考になれば嬉しいです。

---

flex-direction テクニック三選

それでは、flex-direction でよくある3つの落とし穴と解決策を見ていきましょう。

テクニック1：flex-col で justify-center が横方向に効かない

誤解シナリオ

1. 読者Aさんはカードを縦に並べて、横方向に中央寄せしたい
2. 「中央寄せだから justify-center で…」と書く
3. 公式ドキュメント（https://tailwindcss.com/docs/justify-content）を見ても、縦並びとの関係に気づかない
4. 「あれ？横方向に中央寄せされない…」と困惑

NG：justify-center で横中央にならない

<div class="flex flex-col justify-center h-64 bg-slate-700 p-4">
  <div class="bg-white p-4 rounded">カード1</div>
  <div class="bg-white p-4 rounded mt-4">カード2</div>
</div>

justify-center は主軸方向に効きます。flex-col では主軸が縦方向になるため、justify-center は縦方向の中央寄せになります。

OK：items-center で横中央に

<div class="flex flex-col items-center h-64 bg-slate-700 p-4">
  <div class="bg-white p-4 rounded">カード1</div>
  <div class="bg-white p-4 rounded mt-4">カード2</div>
</div>

items-center は交差軸方向に効きます。flex-col では交差軸が横方向なので、横方向の中央寄せになります。

ポイント

flex-col で縦並びにすると、justify は縦方向、items は横方向に効きます。横中央にしたいときは items-center を使いましょう。

---

テクニック2：flex-row-reverse + space-x でスペースがズレる

誤解シナリオ

1. 読者Bさんは要素を逆順で横に並べたい
2. flex flex-row-reverse space-x-4 と書く
3. 「あれ？スペースが右端についてしまう…」と困惑
4. 公式ドキュメントを見ても原因がわからない

NG：space-x でスペースがズレる

<div class="flex flex-row-reverse space-x-4 bg-slate-700 p-4">
  <div class="bg-white p-4 rounded">1</div>
  <div class="bg-white p-4 rounded">2</div>
  <div class="bg-white p-4 rounded">3</div>
</div>

space-x は「最初の子要素以外」に左マージンを付ける仕組みです。flex-row-reverse で視覚的な順序が逆になっても、DOM順序は変わらないため、スペースの位置がズレてしまいます。

OK：gap で均等にスペース

<div class="flex flex-row-reverse gap-4 bg-slate-700 p-4">
  <div class="bg-white p-4 rounded">1</div>
  <div class="bg-white p-4 rounded">2</div>
  <div class="bg-white p-4 rounded">3</div>
</div>

gap は要素間に均等にスペースを入れるため、reverse でも正しく動作します。

ポイント

flex-row-reverse や flex-col-reverse を使うときは、space-x ではなく gap を使いましょう。

---

テクニック3：flex-col-reverse で justify-start が下寄せになる

誤解シナリオ

1. 読者Cさんはチャット画面を作りたい（新しいメッセージが下に来る）
2. 「CSS 縦並び 逆順」で検索し、公式ドキュメント（https://tailwindcss.com/docs/flex-direction）で flex-col-reverse の存在を知る
3. 「これだ！」と flex flex-col-reverse を適用 → 順番は期待通りになった
4. 次に「上に余白を空けたいから justify-start で…」と書く
5. 「あれ？下に寄ってしまう…」と困惑

NG：justify-start で下に寄ってしまう

<div class="flex flex-col-reverse justify-start h-64 gap-4 bg-slate-700 p-4">
  <div class="bg-white p-4 rounded">メッセージ1</div>
  <div class="bg-white p-4 rounded">メッセージ2</div>
</div>

flex-col-reverse では主軸が「下から上」になります。そのため justify-start は主軸の始点、つまり下寄せになります。

OK：justify-end で上寄せ

<div class="flex flex-col-reverse justify-end h-64 gap-4 bg-slate-700 p-4">
  <div class="bg-white p-4 rounded">メッセージ1</div>
  <div class="bg-white p-4 rounded">メッセージ2</div>
</div>

justify-end は主軸の終点に寄せます。flex-col-reverse では主軸が「下から上」なので、終点は上になります。

ポイント

flex-col-reverse では主軸が逆転するため、justify-start と justify-end の効果も逆になります。上寄せにしたいときは justify-end を使いましょう。

---

まとめ

TailwindCSS flex-direction の3つのテクニックを紹介しました。

• flex-col で横中央にしたいとき → items-center を使う
• flex-row-reverse でスペースを入れたいとき → gap を使う
• flex-col-reverse で上寄せにしたいとき → justify-end を使う

flex-direction を変えると主軸と交差軸が入れ替わることを意識すると、迷わなくなります。

最初は混乱しますが、Tailwind Play で実際に書いて確認すると、感覚がつかめてきます。ぜひ試してみてください。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）