LoginSignup
makikooo
@makikooo

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

横並びのカードの中身の高さを合わせたい

Q&AClosed

解決したいこと

横並びのカードの中身の高さをあわせたい

発生している問題

flex-grow: 1;が効かない
<ul class="plan_list">
      <li class="plan_item">
        <h5 class="plan_title">
          タイトルタイトルタイトル
        </h5>
        <p class="suggest">
          おすすめおすすめおすすめ<br>おすすめ
        </p>
        <p class="plan_sub_title">
          サブタイトルサブタイトル
        </p>
        <p class="plan_money">
          <span class="money">5〜15</span></p>
        <p class="separately">
          ※別途 費用が掛かります。
        </p>
      </li>
      <li class="plan_item">
        <h5 class="plan_title">
          タイトルタイトルタイトル
        </h5>
        <p class="suggest">
          おすすめおすすめおすすめ<br>おすすめおすすめおすすめおすすめおすすめ
        </p>
        <p class="plan_sub_title">
          サブタイトルサブタイトル
        </p>
        <p class="plan_money">
          <span class="money">35</span></p>
        <p class="separately">
          ※別途 費用が掛かります。
        </p>
      </li>
      <li class="plan_item">
        <h5 class="plan_title">
          タイトルタイトルタイトル
        </h5>
        <p class="suggest">
          おすすめおすすめおすすめ<br>おすすめおすすめ
        </p>
        <p class="plan_sub_title">
          サブタイトルサブタイトル
        </p>
        <p class="plan_money">
          <span class="money">70</span></p>
        <p class="separately">
          ※別途 費用が掛かります。
        </p>
      </li>
    </ul>
.plan_list {
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 15px;
}
.plan_item {
  box-shadow: 0 0 8px 4px rgba(165, 165, 165, .25);
  width: 30%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.plan_title {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}
.suggest {
  color: #555F93;
  font-size: 24px;
  margin-bottom: 15px;
  flex: 1 auto;
  height: 100%;
}
.plan_sub_title {
  font-size: 16px;
  margin-bottom: 10px;
}
.plan_money {
  font-size: 40px;
  margin-bottom: 10px;
}
.money {
  color: #FF7A00;
}
.separately {
  font-size: 14px;
  margin-bottom: 20px;
}
0

1Answer

align-itemsをcenterからstretchに変更することで高さを揃えられると思います。

.plan_list {
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-around;
- align-items: center;
+ align-items: stretch;
  gap: 15px;
}

See the Pen Untitled by yotty (@yotty) on CodePen.

2

Comments

  1. @makikooo

    Questioner

    ありがとうございます。
    無事にできました

Your answer might help someone💌