flexboxを使ってカードを作りたいが、カードの中の要素の高さが揃わない

Question

前提・実現したいこと

HTML,CSSを用いて、左右の高さが揃ったカードを作りたいと考えてます。
flexboxを使って親要素の高さは揃うのですが、子要素のタイトルや、その説明の高さが合いません。
どのようにすれば、親要素以外の要素（タイトル、説明）の高さも揃うのでしょうか。

該当のソースコード

<ul class="plan-list container" >
            <li class="plan-list-item ">
                <div class="plan-img"><img src="./img/plan1.png" alt=""></div>
                <div class="plan-text">
                    <h4 class="plan-title">teratail（架空サイト）</h4>
                    <p class="plan-naiyou">flexboxを使ってカードを作りたいが、カードの中の要素の高さが揃わない</p>
                </div>
                <p class="primary"><a href="飛ばしたいURL">サイトを見る</a></p>
            </li>
            <li class="plan-list-item" >
                <div class="plan-img"><img src="./img/plan2.png" alt=""></div>
                <div class="plan-text">
                    <h4 class="plan-title">teratail teratail teratai lteratail teratail（架空サイト）</h4>
                    <p>HTML,CSSを用いて、左右の高さが揃ったカードを作りたいと考えてます。
flexboxを使って親要素の高さは揃うのですが、子要素のタイトルや、その説明の高さが合いません。
どのようにすれば、親要素以外の要素（タイトル、説明）の高さも揃うのでしょうか。</p>
                </div>
                <p class="primary"><a href="飛ばしたいURL">サイトを見る</a></p>
            </li>
            <li class="plan-list-item">
                <div class="plan-img"><img src="./img/plan3.png" alt=""></div>
                <div class="plan-text">
                    <h4 class="plan-title">teratailteratailteratail（架空サイト）</h4>
                    <p>子要素にも親要素と同様にdisplay:flex;を適用したところ特に変化は見られなかった。</p>
                </div>
                <p class="primary"><a href="飛ばしたいURL">サイトを見る</a></p>
            </li>
        </ul>

.plan-title{
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-size: 1.7rem;
    text-align: center;
    font-weight: bold;
}
#works ul{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    margin-top: 4.6rem;
    justify-content: space-between;
}
#works ul li {
    width: 31%;
}
.plan-naiyou{
    display: flex;
}

試したこと

子要素にも親要素と同様にdisplay:flex;を適用したところ特に変化は見られなかった。

Answer 1

固定値で高さを設定すれば揃いますが、内容のテキスト量が変わりますので、それではうまくないですよね。その辺をどのようにするか次第ですね。

例えば、「サイトを見る」のリンクのみカードの最下部に配置するということにするなら、position: absolute;で最下部に配置すればいいでしょう。

#works ul li {
  width: 31%;
  padding-bottom: 1.5em; /*「サイトを見る」リンク用の余白 */
  position: relative;
}
.plan-img img {
  width: 100%; /* 画像をカード幅に合わせる */
}
.primary {
  position: absolute;
  bottom: 5px;
  left: 5px;
}

Comments

[teratail314]

回答ありがとうございます。position relative ,absoluteを使うことでボタンの位置を調整することができました。ありがとうございます。もう一点質問があります。ボタンを各々のカードの真ん中に配置したいのですが、margin: 0 auto;だとボタンがカードの外に出てしまいます。また、padding-left:20%; padding-right:20%とすると、レスポンシブデザインの時、幅が固定されてしまって画面幅を小さくしたときにボタンの位置が崩れてしまいます。 そのようになる原因と解決策を教えていただけないでしょうか。

[hatena19]

ボタンとは、<p class="primary">のことですか。

.primary {
position: absolute;
bottom: 3px;
left: 50%;
transform: translatex(-50%);
}

[teratail314]

回答が遅れてしまい申し訳ありません。praimaryクラスのボタンが真ん中に配置されました!ありがとうございました。

Answer 2

ul liにグリッドレイアウトを適用してあげるとか？
下のコードはサンプルです。そのままでは使えないので、plan-textのところを工夫してみてくださいね。

ul li {
    display: grid;
    grid-template-rows: 0.5fr 1fr 0.1fr;
    grid-gap: 10px;
}

Comments

[teratail314]

回答ありがとうございます。申し訳ありませんが、グリッドレイアウトを勉強しておらず、記載していただいた内容を理解することができませんでした。私の勉強不足でしたので、グリッドレイアウトの勉強をした後にもう一度回答していただいたコードで確認してみたいと思います。