Qiita Engineer Festa20242024年7月17日まで開催中！

【CSS】カードレイアウトFlexboxで文字量合わせる方法

Posted at 2024-07-09

はじめに

カードレイアウトを作成する際に、各カードの内容が異なるためにテキストの量がバラバラになることがあります。その結果、レイアウトが崩れてしまうことがあります。

この記事では、Flexboxを使って文字量が異なるカードのレイアウトを整える方法についてまとめます。

この記事が皆さんのお役に立てば嬉しいです！

必要なコード解説

HTML

<div class="container">
  <div class="card">
    <div class="card-picture">画像</div>
    <div class="card-content">
      <h2>カード1</h2>
      <p>短い文章</p>
      <p>短い文章</p>
    </div>
  </div>

  <div class="card">
    省略
  </div>
  ・
  ・
  ・
</div>

親要素containerで囲み、その中に子要素cardを作成して、カードレイアウトを作成していきます。

CSS

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

.card-content p {
  flex-grow: 1;
}

.card-contentにdisplay: flex;とflex-direction: column;を設定し、flex-grow: 1;を追加することで、p要素が余分なスペースを占有するようにします。
.card-contentのflex-grow: 1;がカード全体の高さを均一に保つのに役立ちます。
flex-growは、flexアイテムの幅や高さを伸ばすプロパティで、display:flex;と併用します。

全体のコード

See the Pen flex-grow by rei-dev99 (@rei-dev99) on CodePen.

おわりに

この記事がお役立ちになれば幸いです。
もし、この記事の内容に不備や改善点などがありましたら、ご指摘いただけると嬉しいです。