【Tips】Flexboxを使ってテキスト量が異なるボタンの高さを揃える

2022年3月12日2022年11月14日

URLをコピーしました！

カード型レイアウトを作成していて、テキスト量が異なる場合にボタンの高さが揃わず苦労しました。

解決策を備忘録として記事にまとめます。

完成サンプル

CodeSandBoxを使って、サンプルを作成しました↓

以下より、今回の実装で関係のあるところだけ抜粋してコードを書いていきます。

HTMLコード(抜粋)

HTMLのコードはこちら↓

<div class="l-grid" data-column="md:2 xl:3" data-gap="xl:large">
    <article class="l-grid__item">
       <div class="c-card p-card">
          <div class="c-card__body p-card__body">
             <h3 class="c-card__title p-card__text">記事のタイトル</h3>
             <p class="c-card__text p-card__text">記事のテキスト</p>
           </div>
           <figure class="c-card__thumbnail p-card__thumbnail">
             <img
   　　　　　　　　class="c-card__image p-card__image"
                 src="assets/img/apple.jpg"
                 alt="艶のあるりんご"
              />
            </figure>
            <p class="c-card__action p-card__action">
              <a class="p-card__button c-button" href="">詳細を見る</a>
            </p>
         </div>
         <!-- c-card -->
     </article>
　　　<!-- 後は、同じ記述の繰り返しのため省略 -->
</div>

CSSコード（抜粋）

CSSのコードはこちら↓



/* =================================================
 Layout
 ~================================================*/
.l-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .l-grid[data-column~="md:2"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .l-grid[data-column~="xl:3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .l-grid[data-gap~="xl:large"] {
    gap: 3rem;
  }
}

.l-grid__item {
  display: flex;　/*重要*/
  flex-direction: column;/*重要*/
  border: 1px solid #333;
}

/* =======================================================
  Component
=========================================================*/

.c-card {
  display: flex;
  flex-direction: column;
  flex-grow: 1;/*重要*/
}

/* =======================================================
  Project
========================================================*/

.p-card__body {
  padding: 0.5em;
}

.p-card__body > * + * {
  padding-top: 1em;
}

.p-card__thumbnail {
  order: -1;
  padding-bottom: 1rem;
}

.p-card__action {
  padding: 1em 0;
  margin-top: auto;
  text-align: center;
}

記事の横並びはGridを使いました。

「.c-card」にFlexを使って縦並びにして、画像＞タイトル＞テキスト＞ボタンの順に変更しています。