flex-colとmt-autoで子要素を下に配置する
開発環境
- react 19.0.0
- tailwindcss 3.4.16
前提
UI のレイアウトで「特定の子要素を下部に固定したい」場面、よくあります。
たとえばカードコンポーネントの中で、テキストや画像は上に、ボタンだけを一番下に置きたいときなどです。
多くの人はまず以下のような方法を思いつくと思います。
- position: absolute; bottom: 0;
- flex justify-between で上下に分ける
- flex-col + mt-auto
どれも正解ではありますが、柔軟でメンテナンスしやすい「flex-col + mt-auto」がおすすめ です。
（※ Tailwind を使っていない場合でも、単なる CSS の flex プロパティで同じ原理が使えます）
本題
実装サンプル
export const Card = () => {
return (
<div className="flex flex-col w-64 h-48 p-4 border rounded-lg">
<h2 className="text-lg font-semibold">タイトル</h2>
<p className="text-sm text-gray-600">
これはカードの本文テキストです。内容が短くても長くてもOK。
</p>
{/* 下部に固定したい要素 */}
<button className="mt-auto bg-blue-500 text-white px-4 py-2 rounded">
詳細を見る
</button>
</div>
);
}Tailwind では以下のように解釈されます。
- flex flex-col：要素を縦方向に並べる
- mt-auto：上マージンを「自動」にする（＝残りの空間をすべて埋める）
つまり、上の余白を自動的に最大化することで、ボタンが下に押し出されるという仕組みです。
CSS で書くと次のようになります。
.container {
display: flex;
flex-direction: column;
}
.button {
margin-top: auto;
}とてもシンプルですが、カード、サイドバー、モーダルなどで「下に固定したい要素」がある場面では頻出パターンです。
コードレビューでよくある話
この書き方、意外と知られていないことが多いです。
私自身、コードレビューで以下のような修正を何度か指摘しました。
❌ position: absolute; bottom: 0; で無理やり配置
✅ flex-col + mt-auto で自然にレイアウト
absoluteを使うと、親要素にrelativeをつけ忘れたり、コンテンツ量で崩れたりといった問題が起きやすいんですよね。
また、flex justify-betweenは上下で要素を分ける必要があるので、構造が1段深くなります。
<div className="flex flex-col justify-between h-48">
<div>
<h2>タイトル</h2>
<p>本文テキスト</p>
</div>
<button>詳細を見る</button>
</div>一方で、flexとmt-autoの組み合わせなら、高さが可変でもきれいに対応できます。
注意点
親の高さが明示的に指定されていないと、mt-autoは働きません。 例: h-fullや固定値 (h-48) を指定しておく必要があります。
さいごに
flex-col+mt-autoは、知っていると地味に効くレイアウトテクニックです。 特別なロジックも必要なく、Tailwind ならクラスを1つ足すだけ。 「absoluteで頑張らない」柔軟なUI設計の第一歩として、覚えておくとかなり便利です。