Flexbox 横並びを理解すると「並べる・揃える・余白を配る」が一気に楽になる
横並びレイアウトは、ナビメニュー、カード一覧、ボタンの並びなど、どのサイトでも必ず出てきます。
Flexbox を使うと、「横に並べる」「中央に揃える」「端に寄せる」「均等に余白を配る」が直感的に書けるようになります。
ここでは、CSS と Tailwind CSS の両方で、初心者向けに「横並びの基本パターン」を丁寧に解説します。
Flexbox 横並びのいちばん基本
親に display:flex を書く、これがすべてのスタート
.row {
display: flex;
}
<div class="row">
<div>要素1</div>
<div>要素2</div>
<div>要素3</div>
</div>
これだけで、子要素が 横並び になります。
Tailwind 版の基本
<div class="flex">
<div>要素1</div>
<div>要素2</div>
<div>要素3</div>
</div>
Tailwind では display:flex を flex というクラス1つで表現します。
横並び＋左寄せ・中央寄せ・右寄せ
justify-content で「横方向の揃え方」を決める
.row {
display: flex;
justify-content: flex-start; /* 左寄せ（初期値） */
}
よく使う値は次の3つです。
flex-start → 左寄せcenter → 中央寄せflex-end → 右寄せ
CSS 例：中央寄せ
.row {
display: flex;
justify-content: center;
}
<div class="row">
<button>OK</button>
<button>キャンセル</button>
</div>
Tailwind 版
<div class="flex justify-center">
<button class="px-4 py-2 bg-blue-600 text-white rounded">OK</button>
<button class="px-4 py-2 bg-gray-200 rounded">キャンセル</button>
</div>
要素間の余白を均等に配る
justify-content: space-between / space-around / space-evenly
.row {
display: flex;
justify-content: space-between;
}
space-between → 両端にくっつけて、間だけ均等space-around → 要素の前後に均等な余白space-evenly → 全ての間隔を完全に均等
CSS 例：space-between
.row {
display: flex;
justify-content: space-between;
}
<div class="row">
<div>左</div>
<div>中央</div>
<div>右</div>
</div>
Tailwind 版
<div class="flex justify-between">
<div>左</div>
<div>中央</div>
<div>右</div>
</div>
縦方向の揃え方（高さが違う要素を揃える）
align-items で「縦方向の揃え方」を決める
.row {
display: flex;
align-items: center;
}
よく使う値は次の2つ。
flex-start → 上揃えcenter → 縦中央揃え
CSS 例：縦中央揃え
.row {
display: flex;
align-items: center;
}
<div class="row">
<div style="height: 40px; background:#ddd;">A</div>
<div style="height: 80px; background:#bbb;">B</div>
</div>
Tailwind 版
<div class="flex items-center">
<div class="h-10 bg-gray-300">A</div>
<div class="h-20 bg-gray-400">B</div>
</div>
横並びの幅を「均等」にする
flex:1 で「余った幅を均等に分ける」
.row {
display: flex;
}
.row > div {
flex: 1;
}
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
3つの要素が 同じ幅 で横並びになります。
Tailwind 版
<div class="flex">
<div class="flex-1 bg-gray-100 p-4">1</div>
<div class="flex-1 bg-gray-200 p-4">2</div>
<div class="flex-1 bg-gray-300 p-4">3</div>
</div>
横並びを「途中で折り返す」（レスポンシブカード）
flex-wrap で折り返しを許可する
.row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 200px; /* 最小200pxで、余白があれば広がる */
}
<div class="row">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
<div class="card">カード4</div>
</div>
Tailwind 版
<div class="flex flex-wrap gap-4">
<div class="flex-1 min-w-[200px] bg-white p-4 rounded shadow">カード1</div>
<div class="flex-1 min-w-[200px] bg-white p-4 rounded shadow">カード2</div>
<div class="flex-1 min-w-[200px] bg-white p-4 rounded shadow">カード3</div>
<div class="flex-1 min-w-[200px] bg-white p-4 rounded shadow">カード4</div>
</div>
よく使う「横並びテンプレート」まとめ
ボタンを横並び＋右寄せ
CSS
.actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
HTML
<div class="actions">
<button>キャンセル</button>
<button>保存</button>
</div>
Tailwind
<div class="flex justify-end gap-2">
<button class="px-3 py-2 bg-gray-200 rounded">キャンセル</button>
<button class="px-3 py-2 bg-blue-600 text-white rounded">保存</button>
</div>
アイコン＋テキストを横並び＋縦中央揃え
Tailwind
<div class="flex items-center gap-2">
<span class="inline-block w-5 h-5 bg-blue-500 rounded-full"></span>
<span>通知メッセージ</span>
</div>
Flexbox 横並びで一番大事な考え方
横並びレイアウトは、次の3つをセットで考えると整理しやすいです。
親要素に対してdisplay: flex;
横方向の揃え方justify-content: ...（Tailwind: justify-*）
縦方向の揃え方align-items: ...（Tailwind: items-*）
ここさえ押さえれば、
「左寄せ・中央寄せ・右寄せ・均等配置・縦中央揃え」は全部コントロールできます。
