【CSS】Flexboxで高さが揃わない原因と解決方法｜カードレイアウト・実務パターン付き

/* Flexコンテナのデフォルト値 */
.container {
    display: flex;
    align-items: stretch; /* デフォルト値 - 明示不要 */
}

ポイント：「高さが揃わない」のは、何かがstretch動作を打ち消しているからです。原因を特定することが解決の第一歩になります。

<div class="container">
    <div class="item">短いテキスト</div>
    <div class="item">長いテキストが入る要素。<br>複数行になります。<br>3行目もあります。</div>
    <div class="item">中くらいのテキスト</div>
</div>

.container {
    display: flex;
    gap: 16px;
    /* align-items: stretch はデフォルトなので省略可 */
}

.item {
    flex: 1;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    /* height を指定しない！ */
}

/* NG：高さが揃わない */
.container {
    display: flex;
    align-items: center; /* stretchではなくなった */
}

/* OK：高さが揃う */
.container {
    display: flex;
    align-items: stretch; /* 明示的に戻す */
}

注意：CSSフレームワーク（Bootstrap, Tailwind等）がデフォルトでalign-itemsを変更している場合があります。DevToolsで実際に適用されている値を確認してください。

/* NG：heightが指定されているとstretchが効かない */
.item {
    height: 100px; /* この指定がstretchを無効にする */
}

/* NG：max-heightも高さを制限する */
.item {
    max-height: 200px; /* 200pxより伸びなくなる */
}

/* OK：heightを削除すればstretchが効く */
.item {
    /* heightは指定しない */
    padding: 16px;
}

.item {
    min-height: 80px;  /* 最低80px、それ以上は伸びる */
    /* height は指定しない */
}

<div class="card-container">
    <div class="card">
        <img src="image1.jpg" alt="">
        <h3>タイトル</h3>
        <p>短い説明文</p>
    </div>
    <div class="card">
        <img src="image2.jpg" alt="">
        <h3>長いタイトルが入る場合</h3>
        <p>長い説明文が入ります。複数行にわたるテキストで高さが変わります。</p>
    </div>
    <div class="card">
        <img src="image3.jpg" alt="">
        <h3>タイトル</h3>
        <p>中くらいの説明文</p>
    </div>
</div>

.card-container {
    display: flex;
    gap: 20px;
    /* align-items: stretch がデフォルトで適用される */
}

.card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* heightは指定しない */
}

.card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.card h3,
.card p {
    padding: 0 16px;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column; /* カード内を縦並びに */
}

.card-body {
    flex-grow: 1; /* この領域が残りスペースを埋める */
    padding: 16px;
}

.card-footer {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
}

flex-grow の仕組み

• flex-grow: 0（デフォルト）: コンテンツの高さのまま
• flex-grow: 1: 親要素の残りスペースをすべて占める
• 複数の子要素にflex-growを指定すると、比率に応じて分配される

<div class="outer">
    <div class="column">
        <div class="inner-card">カードA</div>
        <div class="inner-card">カードB</div>
    </div>
    <div class="column">
        <div class="inner-card">カードC（長いコンテンツ）</div>
        <div class="inner-card">カードD</div>
    </div>
</div>

/* 外側：カラムの高さを揃える */
.outer {
    display: flex;
    gap: 20px;
    /* align-items: stretch でカラムの高さが揃う */
}

/* 中間：カラム自体もFlexboxにする */
.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 内側：カードが均等に伸びる */
.inner-card {
    flex: 1; /* 残りスペースを均等に分配 */
    padding: 16px;
    background: #fff;
    border-radius: 8px;
}

ポイント：ネストしたFlexboxで高さを揃えるには、「外側→中間→内側」のすべての階層でFlexboxの設定が必要です。中間の.columnをdisplay: flexにし忘れると、内側のカードの高さは揃いません。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* グリッドは同じ行のアイテムを自動的に同じ高さにする */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; /* すべての行を同じ高さに */
    gap: 20px;
}

.card-container {
    display: flex;
    gap: 20px;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-text {
    flex-grow: 1;
    overflow-y: auto; /* テキストが多い場合はスクロール */
    padding: 16px;
}

注意：overflow: hiddenをカード自体に付けると、box-shadowが切れたり、ホバーエフェクトが欠けたりすることがあります。overflowは溢れる可能性のある内部要素にだけ指定しましょう。

.card-description {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最大3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.6;
}

<div class="card-container">
    <div class="card">
        <h3>プランA</h3>
        <p>短い説明</p>
        <a href="#" class="card-btn">詳細を見る</a>
    </div>
    <div class="card">
        <h3>プランB</h3>
        <p>長い説明文が入ります。複数行になって高さが変わります。</p>
        <a href="#" class="card-btn">詳細を見る</a>
    </div>
</div>

.card-container {
    display: flex;
    gap: 20px;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-btn {
    margin-top: auto; /* 残りスペースを上マージンに */
    display: inline-block;
    padding: 10px 20px;
    background: #0284c7;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
}

margin-top: auto が効く仕組み

• Flexboxでは、autoマージンは残りの空きスペースをすべて吸収します
• margin-top: autoは「上方向のスペースを最大限取る」= 要素を一番下に押し下げます
• これはflex-growを使う方法よりもHTML構造を変えずに実装できるメリットがあります

/* 行をまたいだ高さ揃えは不可能 */
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.item {
    flex: 0 0 calc(33.333% - 14px);
    /* 同じ行の要素は揃うが、行をまたぐと揃わない */
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
}

/* タブレット */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホ */
@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: 1fr; /* 1列表示 */
        grid-auto-rows: auto; /* 1列なら揃え不要 */
    }
}

.container {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        /* 縦並びでは align-items: stretch は「幅」を揃える */
        /* 高さはコンテンツに依存する（これが正しい動作） */
    }
}

ポイント：flex-direction: columnに切り替わると、主軸が縦方向になります。このときalign-items: stretchは幅方向に作用するため、高さ揃えとは無関係になります。縦並び時は各要素がコンテンツに応じた高さになるのが自然な動作です。

/* NG：アスペクト比が異なる画像でカードの高さがバラバラ */
.card img {
    width: 100%;
    /* height未指定 → 画像本来のアスペクト比で表示 */
}

/* OK：高さを固定してobject-fitでトリミング */
.card img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 比率を保ちつつ領域を埋める */
}

/* OK：aspect-ratioで比率を統一（モダンブラウザ） */
.card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* NG：特定の要素だけ高さが揃わない */
.item:nth-child(2) {
    align-self: flex-start; /* この要素だけstretchが解除される */
}

/* OK：align-selfを削除またはstretchに */
.item:nth-child(2) {
    align-self: stretch; /* 明示的にstretchを指定 */
}

/* NG：heightがstretchを打ち消す */
.card {
    height: fit-content; /* コンテンツの高さに固定 → 揃わない */
}

/* NG：パーセント指定も注意 */
.card {
    height: 50%; /* 親の50%に固定 → 揃わない */
}

/* OK：heightを指定しない */
.card {
    /* height は削除する */
}

/* Bootstrapの .row は align-items が変更される場合がある */
/* DevToolsで確認し、必要に応じてオーバーライド */
.row.equal-height {
    align-items: stretch;
}

/* Tailwind CSSの場合 */
/* items-stretch クラスを追加する */
/* <div class="flex items-stretch gap-4"> */

.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.product-card {
    flex: 0 0 calc(33.333% - 16px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;
}

.product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.product-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.product-info {
    flex-grow: 1; /* テキスト領域が伸びる */
    padding: 16px;
}

.product-price {
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
    font-weight: 700;
    color: #dc2626;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.article-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.article-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.article-body {
    flex-grow: 1;
    padding: 16px;
}

.article-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #64748b;
    line-height: 1.6;
}

.article-meta {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 13px;
    color: #94a3b8;
}

.pricing-container {
    display: flex;
    gap: 24px;
    align-items: stretch; /* 明示的に指定 */
    max-width: 960px;
    margin: 0 auto;
}

.pricing-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    text-align: center;
}

/* 推奨プランの強調 */
.pricing-card.recommended {
    border-color: #0284c7;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.15);
    position: relative;
}

.pricing-features {
    flex-grow: 1; /* 機能一覧が残りスペースを埋める */
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.pricing-features li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.pricing-btn {
    margin-top: auto; /* ボタンを一番下に固定 */
    padding: 14px;
    background: #0284c7;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}