TailwindのFlexで縦並び・右寄せ・間隔を空ける方法【早見表】

Tailwind CSSでFlexboxを使いこなして、横並びや中央揃えのレイアウトを素早く実装したい。そう思いつつも、具体的なクラス名やレスポンシブ時の挙動がすぐに出てこなくて困る場面は多いものです。モダンなWeb開発において、Tailwind Flexをマスターすることは作業効率を上げるために欠かせません。

こうした疑問に答えるべく、基礎から応用までを整理しました。

Tailwind Flexを正しく使えば、複雑なレイアウトも数個のクラスを付与するだけで直感的に構築できます。縦並びにするFlex col tailwindや、Tailwind flex centerによる中央配置、さらにTailwind flex 1を用いた可変レイアウトも自由自在です。アイテムのTailwind flex 間隔を調整するTailwind flex spaceや、要素を端に寄せるTailwind flex right（右寄せ）の設定もスムーズに行えます。

2026年の最新仕様に基づいた解説により、制作スピードとデザインの品質を劇的に向上させることが可能です。ぜひ最後まで読み進めて、効率的な開発手法をマスターしてください。

Tailwind Flexの基本的な書き方

Tailwind CSSとはどのようなフレームワークかといった基本を踏まえた上で、Tailwind CSSでFlexboxを利用するには、親要素にクラスを付与することが第一歩です。2026年現在のフロントエンド開発において、Tailwind Flexクラスは効率的なレイアウト構築に欠かせません。

まず要素をフレックスコンテナにするには、flexクラスを指定します。これは標準的なCSSのdisplay flexに対応する設定です。インライン要素として扱う場合は、inline-flexを使用してください。

TailwindのFlexbox操作は、主にコンテナ側とアイテム側の2種類に分かれます。

• コンテナ側：並びの方向や要素間の間隔、折り返しなどを制御
• アイテム側：伸長や収縮、個別の配置などを制御

基本的な記述を整理すると、以下の表のようになります。

横並びにするクラス

子要素を水平方向に並べるには、Tailwind CSSチートシートを参考にしつつ、flex-rowクラスを使用します。Tailwind CSSはデフォルトでこの方向が設定されていますが、コードの可読性を高めるために明示するのが理想です。

要素を横に並べる際は、flexとflex-rowを組み合わせて使用してください。これによりCSSのflex-direction rowが適用され、主軸が水平方向になります。

ナビゲーションメニューなどの要素を左から順に並べたい場合、親要素にflex flex-rowを付与します。Tailwind flex 右寄せを実現したいときや、右から左へ逆順に並べる場合はflex-row-reverseが便利です。方向を指定するクラスを活用すれば、直感的な横並びのレイアウトが可能になります。

縦並びにするクラス

Tailwind UIなどのコンポーネント構成や、スマートフォン向けの表示などで要素を垂直方向に積み重ねたい場合は、Flex col tailwindの設定であるflex-colクラスを適用します。

要素を縦に並べる際は、flex-colを使用してください。これはflex-direction columnに対応しており、主軸が垂直方向に切り替わるためです。

モバイルファーストの対応では、Tailwind flex 縦並びをflex-colで実現し、PCサイズではmd flex-rowのようにレスポンシブプレフィックスで切り替える手法が一般的です。下から上へ並べる場合は、flex-col-reverseを使います。縦並びの制御は、近年のレスポンシブデザインにおいて非常に重要な役割を果たします。

伸縮率を指定するクラス

Tailwind CDN環境などでも、子要素が親のスペースをどのように占有するか制御するには、Tailwind flex 1などの伸縮関連クラスを使用します。

よく使われる伸縮クラスは以下の通りです。

2026年現在の仕様では、より詳細な制御も可能です。

• grow または grow-0：伸長率のみを制御
• shrink または shrink-0：縮小率のみを制御
• flex-[数値]：任意の値を指定可能

特定の要素だけを広げるといった微調整も、これらのクラスで容易に行えます。

折り返すクラス

tailwind.config.jsでのカスタム設定などと組み合わせながら、フレックスアイテムが親コンテナの幅を超えた際、改行させるかどうかはflex-wrap系クラスで制御します。

複数のアイテムが画面幅に収まらない可能性がある場合は、flex-wrapを指定してください。デフォルトのflex-nowrapでは、要素が幅を無視して突き抜けたり無理に圧縮されたりして、レイアウトが崩れる原因になります。

例えばタグのリストなどで、Tailwind flex spaceを保ちながら画面幅に応じて自動的に改行させたいときにflex-wrapを追加します。適切な折り返し設定は、多様なデバイスに対応した柔軟なレイアウトに不可欠です。

折り返しに関する主なクラスは以下の3種類です。

• flex-wrap：溢れた場合に折り返す
• flex-nowrap：折り返さずに1行に収める
• flex-wrap-reverse：逆方向に折り返す

TailwindのFlexを使った配置調整の方法

Tailwindのレスポンシブ設計を含めたFlexboxの基本構造を理解したら、次は要素の配置を細かく調整するクラスを習得しましょう。主軸と交差軸を意識することで、justify系とitems系のクラスを適切に使い分けられます。

主軸の配置はjustify系、交差軸の配置はitems系のクラスで調整可能です。これらを組み合わせることで、理想通りのレイアウトを構築できます。

中央揃えにするクラス

要素を中央に配置する際は、主軸と交差軸の両方で中央を指定しましょう。Tailwind flex centerを実現するには、複数のクラスを組み合わせます。

1. 主軸方向の中央揃えにはjustify-centerを使う
2. 交差軸方向の中央揃えにはitems-centerを使う

画面中央に配置する場合、親要素にflex items-center justify-centerを記述します。垂直方向の中央揃えを機能させるには、h-screenなどで親の高さを確保してください。

• 横方向の中央はflex justify-centerで指定する
• 縦方向の中央はflex items-centerで指定する
• 上下左右の完全中央はflex items-center justify-centerを併用する

あわせて読みたい

Tailwindのimportant設定方法と競合解決の代替策4選【初心者】

Tailwindのimportantが反映されない課題に対し、単一や全体設定の記述法から、ディレクティブでapply非推奨を避け、styleを優先する手法を解説します。

右寄せにするクラス

子要素を右側に寄せる際は、主軸の終点に配置するクラスを使いましょう。Tailwind flex 右寄せを行うには、並べる方向に合わせた指定が必要です。

横並びの場合は、親要素にTailwind flex rightを意図するjustify-endを指定します。Flex col tailwindを使って縦並びにする場合は、items-endで右側に寄せます。

並び順の方向によって、右寄せに使うクラスが変わる点に注意してください。主軸か交差軸かの違いを正しく判断することが大切です。

あわせて読みたい

TailwindCSSのColor指定と一覧・追加方法・v4対応【完全版】

TailwindCSSのColor指定やカラーコード一覧、primaryや背景色でお悩みの方へ、カスタムカラー追加からv4colorまで解説し保守性の高い設計を実現します。

間隔を空けるクラス

要素同士の間にスペースを作るには、gapクラスを使うのが現在の主流です。Tailwind flex spaceを調整する際、このクラスは非常に便利に機能します。

2026年現在は、従来のspace-xクラスよりgapクラスが推奨されています。Tailwind flex 間隔を美しく保つために、以下のクラスを活用してください。

個別にマージンを設定するよりも、親要素でgap-4と指定する方が効率的です。コードの保守性が高まり、記述もシンプルにまとまります。

あわせて読みたい

Tailwindのcalcの書き方・効かない原因と対処法【完全ガイド】

Tailwindのcalcでwidth等の数値が効かない原因と正しい書き方を解説しており、保守性と可読性に優れた記述で妥協のないレイアウト開発が実現します。

均等に配置するクラス

複数の要素をバランスよく並べるには、justify系のクラスが適しています。Tailwind flex 1などのプロパティと組み合わせて、柔軟な幅調整も可能です。

均等配置で主に使用されるクラスは、以下の通り。

ロゴとメニューを分けるナビゲーションには、justify-betweenが役立ちます。カード型デザインを綺麗に配分するには、justify-evenlyがトレンドに合います。

あわせて読みたい

Tailwindで中央寄せ・上下左右や効かない原因と対処法【解決】

Tailwindの中央寄せが効かないとお困りの方へ、上下中央や縦並び、Gridとabsoluteの実装手順を網羅し、実務でのレイアウト構築をさらに効率化します。

TailwindのFlexを使った定番UIの実装例

Tailwind CSSにおけるFlexboxの活用は、モダンなWeb制作に欠かせないスキルです。2026年現在は最新のv4系が主流ですが、flexやjustify-betweenなど基本的なクラスの仕様は継承されています。

Flexboxをマスターすれば、要素配置の悩みが解消され開発スピードが劇的に向上します。実務で頻出する4つの定番UIの実装例を確認しましょう。

ナビゲーションバー

ナビゲーションバーは、ロゴを左側にメニューを右側へ配置するレイアウトが一般的です。親要素にTailwind flexを指定し、子要素の配置を制御するクラスを組み合わせます。

実装のポイントは親要素へflexとjustify-betweenを記述することです。これにより要素が自動で両端へ配置されます。リストを横並びにする際もulタグへflexを適用しましょう。

カードリスト

複数のコンテンツを並べるカードリストは、画面幅に応じて要素を折り返す設計が求められます。Flexboxを使う場合はflex-wrapの活用が最適です。

• flex flex-wrapを指定してコンテンツが溢れた場合に自動で改行させます
• Tailwind flex 間隔を調整するためにgap-4などを使用して等間隔の余白を設けます
• 子要素にTailwind flex 1やmd:basis-1/3を指定してデバイスごとの表示数を制御します

以前はspace-xが主流でしたが、2026年現在はGridとも親和性が高いgapクラスを使うのがベストプラクティスです。

完全な中央揃え

要素を親要素の真ん中に配置するのは、Flexboxが最も得意とするタスクです。ログインフォームやモーダルの実装によく使われます。

1. flexとjustify-center、items-centerの3つをセットで使用します
2. justify-centerが水平方向を、items-centerが垂直方向を中央に寄せる役割を持ちます
3. 画面全体の中央なら親要素にh-screenを付与してTailwind flex centerを実現します
4. この組み合わせを覚えるだけでCSSの複雑なセンタリングが瞬時に完結します

親要素に十分な高さがないと垂直中央には見えません。必ずh-fullやh-screenで高さを確保してください。

レスポンシブ対応のフッター

フッターはモバイルで縦並び、PCで横並びにするレスポンシブ対応が不可欠です。mdプレフィックスを使えば簡単に切り替えが可能です。

モバイルファーストでflex flex-colを指定し、各セクションにgap-8で余白を持たせます。md:flex-rowを付け加えれば、中画面以上のデバイスで自動的に横並びへ最適化されます。具体的な挙動は以下の通りです。

• モバイル（標準）：Flex col tailwindを適用し、要素をTailwind flex 縦並びで垂直に配置します
• タブレット以上（md:flex-row）：横並びへ切り替わり、Tailwind flex 右寄せなどの調整も可能になります

2026年の開発ではflexの方向をデバイスサイズで制御する手法が標準です。

TailwindのFlexでレイアウトが崩れたときの修正手順

Tailwind CSSでFlexboxを利用する際、意図した通りに要素が並ばないことやデザインが崩れることは珍しくありません。2026年現在のモダンなWeb制作でも、Flexboxはレイアウトの主役です。その仕組みを正しく理解し、Tailwindのクラスを適切に組み合わせる必要があります。

レイアウトが崩れた場合は、論理的な手順で原因を切り分けることが解決への近道です。以下の4つのステップに沿って、修正を進めていきましょう。

① 親要素のクラスを検証する

まずは、Flexboxの基盤となる親要素の設定を確認してください。子要素が横並びにならない原因の多くは、親要素へのクラス指定漏れや、主軸・交差軸の誤解にあります。

親要素には必ずflexもしくはinline-flexクラスが必要です。これがない限り、子要素に対してFlex関連の操作は行えません。

特に「justify-」と「items-」の使い分けには注意が必要です。Tailwind flex 縦並びのflex-colを指定すると主軸が垂直方向に変わるため、中央揃えのクラスも役割が入れ替わります。

• 親要素にflexが記述されているか確認する
• flex-rowかflex-colか、意図した方向に軸が設定されているか確認する
• 折り返しが必要な場合はflex-wrapが適用されているか確認する

基本設定が正しく行われているかを第一に点検しましょう。

② 子要素のサイズ指定を見直す

親要素の設定が正しいのにレイアウトが崩れるなら、次は子要素のサイズ指定を疑いましょう。Flexboxには子要素を伸縮させる性質がありますが、明示的な幅指定がその挙動を妨げることがあります。

子要素に固定幅や大きな最小幅が設定されていると、コンテナを突き抜けたり不要な折り返しが発生したりします。以下のポイントをチェックしてください。

• 固定幅の制限：w-96などの固定幅を多用すると、画面幅が狭まった際にカラム落ちの原因になります。
• 最小幅の解除：長いテキストが含まれる場合、ブラウザのデフォルト挙動で要素が縮まないことがあります。Tailwindではmin-w-0を付与して適切に縮小させます。
• 伸縮比率の調整：要素の成長度合いを調整するにはTailwind flex 1やgrowを使用します。

例えば、サイドバーを固定し、メインコンテンツを残り全幅に広げたい場合は次のように記述します。

• サイドバー：w-64 flex-none（固定幅を維持し、伸縮させない）
• メインコンテンツ：Tailwind flex 1（余ったスペースをすべて占有する）

コンテンツの量に応じて、どの要素を伸ばし、どの要素を固定するか個別に指定するのがコツです。

③ レスポンシブ用のプレフィックスを確認する

Tailwind CSSはレスポンシブ対応が容易ですが、これが特定の画面サイズで崩れる原因にもなります。2026年のデバイス多様化環境では、モバイル第一の設計が基本です。

プレフィックスがついたクラスがどのブレイクポイントで有効になり、どの設定を上書きしているかを正確に把握してください。

• モバイルでの指定漏れ：md:flexとだけ書くと、スマホサイズでは通常のブロック要素になり、縦に積み重なります。全サイズで横並びにするなら、プレフィックスなしのflexをベースにします。
• 軸の切り替え：モバイルではflex-col、PCではmd:flex-rowのように切り替える際、中央揃えの指定がどちらの軸でも正しく動くか確認が必要です。
• 位置の調整：Tailwind flex 右寄せを行いたい場合、PCではmd:justify-endを指定し、モバイルでは中央に寄せるなどの個別の設定が有効です。

ブラウザの幅を動かし、デザインが切り替わる瞬間に要素がはみ出さないか注視することが重要です。

④ 開発者ツールで表示を確かめる

コードに間違いが見当たらない場合は、ブラウザの開発者ツールを活用しましょう。視覚的にデバッグするのが最も効率的です。

Tailwindのクラス名だけでなく、他のカスタムCSSによる上書きやブラウザの計算値を把握する必要があるからです。開発者ツールでは以下の手順で検証します。

• インスペクターで要素を選択：親要素をクリックし、Stylesパネルでdisplay: flexが有効か確認します。
• Flexオーバーレイの表示：ブラウザのflexバッジをクリックすると、Tailwind flex spaceなどの余白の分布が画面上に可視化されます。
• 計算済みパネルの確認：実際に要素が何ピクセルで描写されているか、意図しない最小幅が当たっていないかを確認します。

実務では、開発者ツール上でプロパティをオンオフしながら原因を特定するプロセスが一般的です。2026年の高度なブラウザ環境を使いこなすことが、美しいレイアウトを実現する最短ルートとなります。

まとめ：Tailwind Flexで思い通りのレイアウトを実装しよう

モダンなWeb開発に欠かせないTailwind Flexの基本から、実務で役立つ実装例まで詳しく解説しました。横並びやFlex col tailwindによる縦並びの制御、Tailwind flex centerでの中央揃えを正しく理解することが大切です。

配置調整の手順を学ぶことで、複雑なレイアウトもシンプルに構築できるようになります。Tailwind flex 1を活用して要素を伸縮させるなど、効率的なコーディングを心掛けてください。

2026年のWeb制作現場において、Tailwind Flexの習得は開発スピードと品質を劇的に向上させます。もうクラス名で迷うことなく、直感的にデザインを形にできるはず。

不明点やより高度な実装の相談が必要な際は、お気軽にご連絡ください。皆様のプロジェクトが成功することを願っております。

TailwindのFlexに関するよくある質問