横並びカードの文字数によって高さがばらつく

Webサイトやアプリケーションのデザインにおいて、画像とテキストを含むカードはよく使用されます。しかし、テキストの長さが異なる場合、カードの高さが揃わず、見栄えが悪くなることがあります。

この記事では、CSSのflexboxを使用して、画像とテキストを含む横並びのカードの高さを揃える方法を紹介します。

HTMLの構造

まずは、以下のようなHTMLの構造を持つカードを考えます。

<div class="caed-wrapper">
    <div class="card">
      <img src="image.jpg" alt="画像">
      <div class="card-content">
        <h2>タイトル</h2>
        <p class="card-text">テキスト</p>
        <p>カテゴリ</p>
      </div>
    </div>
</div>

上記の例では、画像とテキストを含むカードを表すdiv要素に.cardクラスを付け、テキストを含む要素を表すdiv要素に.card-contentクラスを付けています。

CSSの設定

次に、カードの高さを揃えるために、以下のようなCSSの設定を行います。

.card-wrapper {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  width: 150px;
}

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

.card-text {
  flex-grow: 1; 
}

上記の例では、.card-wrapperにdisplay: flex;を設定して、カードを包む親要素をフレックスコンテナに設定します。

.cardにdisplay: flex;を設定して、画像とテキストを含む要素をフレックスアイテムに設定します。
カードにflexを設定することでデフォルトのalign-items: stretch;が作用するので、これで高さを合わせることができます。

.card-contentにflex: 1 1 auto;を設定して、テキスト部分をフレックスアイテムとして設定します。
flex-direction: column;を設定して、テキストを縦並びに配置します。

.card-content下端の「カテゴリ」の表示位置を揃えたいため、.card-textにfrex-grow: 1;を設定して、テキストの余白を埋めて高さを揃えます。

完成したHTMLとCSS

最終的に、以下のようなHTMLとCSSになります。

See the Pen Untitled by junichi sugihara (@weboscar1164) on CodePen.

以上のように、CSSのflexboxを使用することで、画像とテキストを含む横並びのカードの高さを揃えることができます。